サポート » 使い方全般 » iPadアクセス時の特定CSS読み込み方法について

  • 解決済 osat99

    (@osat99)


    お世話になります。

    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件中)
  • こんにちは。

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

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

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

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

    トピック投稿者 osat99

    (@osat99)

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

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

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

    トピック投稿者 osat99

    (@osat99)

    お世話になります。

    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)

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

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

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

    alert( ua );

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

    alert( 'ontouchend' in document );

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

    トピック投稿者 osat99

    (@osat99)

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

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

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

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