iPadアクセス時の特定CSS読み込み方法について

  • 解決済 osat99

    (@osat99)


    1年、 5ヶ月前

    お世話になります。

    iPadからのアクセスの際に特定のCSSファイルを読み込ませたいのですが、functionsphpにて

    function is_ipad() {
    $is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
    if ($is_ipad) {
        return true;
    } else {
        return false;
    }
}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    if ( is_ipad() ) :
    wp_enqueue_style( 'ipad-style', get_stylesheet_directory_uri() . '/ipad.css', array('parent-style'), '20230510' );    
    endif;

    これですと、iPadのchromeでは読み込んでくれるのですが、iPad safariだと、ユーザーエージェントが「macintosh」のため、うまく読み込んでくれません。単純にmacintoshのユーザーエージェントを足すだけだと、おそらくMac PCも入ってくるので、’ontouchend’ in document　もどこかに入れないといけないかと思うのですが、ご教授いただけないでしょうか？

    よろしくお願いいたします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • Aki Hamano

    (@wildworks)

    1年、 5ヶ月前

    こんにちは。

    調べた限り、サーバーサイド（PHP）だけでiPad端末を正確に判定する事は難しいように思います。

    記載された通り、フロントエンド（JavaScript）なら ontouchend で判定できると思うので、その結果によって

    • CSSファイルを動的に読み込む
    • is-ipad のようなクラスを付与してiPad用スタイルのセレクタとして使用する

    などの方法があると思います。

    トピック投稿者 osat99

    (@osat99)

    1年、 5ヶ月前

    Hamano様、ご返信ありがとうございます。

    こちらも勘違いしておりまして、’ontouchend’ in document自体javaで使用出来るようですね。

    ということはおっしゃるように、jsを読み込ませて、ipad判定でbodyにクラス付与させて、cssでそれ用に書くか、そもそも判定でそれ用のcssファイルを読み込ます、という方法になりますよね？

    トピック投稿者 osat99

    (@osat99)

    1年、 5ヶ月前

    お世話になります。

    jsにて

    const ua = navigator.userAgent.toLowerCase()
const r = document.getElementById('r')
if (/ipad|macintosh/.test(ua) && 'ontouchend' in document) {
  let elements = document.getElementsByClassName("page");
Array.prototype.forEach.call(elements, function (element) {
    element.classList.add("ipad");
});
} else {
  
}

    このように書き、bodyにpageクラスが設定されてますので、そこへipadというクラスを付与するようにしたのですが、chromeのデベロッパーツールではうまく付与されているのが見て取れるのですが、実機ではうまくいかないようです。

    なにか考えられる原因はありますでしょうか？

    よろしくお願いたします。

    トピック投稿者 osat99

    (@osat99)

    1年、 5ヶ月前

    すいません、コードは下記でした。

    const ua = navigator.userAgent.toLowerCase()
if (/ipad|macintosh/.test(ua) && 'ontouchend' in document) {
  let elements = document.getElementsByClassName("page");
elements[0].classList.add("ipad");
} else {
}
    Aki Hamano

    (@wildworks)

    1年、 5ヶ月前

    上手く動かないという事は、条件文に一致していない可能性があります。

    alert( ua );

    と書いて、実機ではua という変数にどのような文字列が渡ってきているかを確認したり、

    alert( 'ontouchend' in document );

    の結果が true になる事などを確認すればよいと思います。

    トピック投稿者 osat99

    (@osat99)

    1年、 5ヶ月前

    どうですね、動かないということはないと思うので、おっしゃってるに確認作業が必要ですね。

    ただ今回はメディアクエリで対応しましたので、また次回同じような場面に遭遇しましたら、試してみようかと思います！

    この度はありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「iPadアクセス時の特定CSS読み込み方法について」には新たに返信することはできません。