Title: iPadアクセス時の特定CSS読み込み方法について
Last modified: 2023年5月10日

---

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

 *  解決済 [osat99](https://ja.wordpress.org/support/users/osat99/)
 * (@osat99)
 * [3年、 5ヶ月前](https://ja.wordpress.org/support/topic/ipad%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e6%99%82%e3%81%ae%e7%89%b9%e5%ae%9acss%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/)
 * お世話になります。
 * iPadからのアクセスの際に特定のCSSファイルを読み込ませたいのですが、functionsphp
   にて
 *     ```wp-block-code
       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](https://ja.wordpress.org/support/users/wildworks/)
 * (@wildworks)
 * [3年、 5ヶ月前](https://ja.wordpress.org/support/topic/ipad%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e6%99%82%e3%81%ae%e7%89%b9%e5%ae%9acss%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-11683314)
 * こんにちは。
 * 調べた限り、サーバーサイド（PHP）だけでiPad端末を正確に判定する事は難しいよう
   に思います。
 * 記載された通り、フロントエンド（JavaScript）なら `ontouchend` で判定できると思う
   ので、その結果によって
    - CSSファイルを動的に読み込む
    - `is-ipad` のようなクラスを付与してiPad用スタイルのセレクタとして使用する
 * などの方法があると思います。
 *  トピック投稿者 [osat99](https://ja.wordpress.org/support/users/osat99/)
 * (@osat99)
 * [3年、 5ヶ月前](https://ja.wordpress.org/support/topic/ipad%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e6%99%82%e3%81%ae%e7%89%b9%e5%ae%9acss%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-11683315)
 * Hamano様、ご返信ありがとうございます。
 * こちらも勘違いしておりまして、’ontouchend’ in document自体javaで使用出来るよう
   ですね。
 * ということはおっしゃるように、jsを読み込ませて、ipad判定でbodyにクラス付与させ
   て、cssでそれ用に書くか、そもそも判定でそれ用のcssファイルを読み込ます、という
   方法になりますよね？
 *  トピック投稿者 [osat99](https://ja.wordpress.org/support/users/osat99/)
 * (@osat99)
 * [3年、 5ヶ月前](https://ja.wordpress.org/support/topic/ipad%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e6%99%82%e3%81%ae%e7%89%b9%e5%ae%9acss%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-11683327)
 * お世話になります。
 * jsにて
 *     ```wp-block-code
       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](https://ja.wordpress.org/support/users/osat99/)
 * (@osat99)
 * [3年、 5ヶ月前](https://ja.wordpress.org/support/topic/ipad%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e6%99%82%e3%81%ae%e7%89%b9%e5%ae%9acss%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-11683328)
 * すいません、コードは下記でした。
 *     ```wp-block-code
       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](https://ja.wordpress.org/support/users/wildworks/)
 * (@wildworks)
 * [3年、 5ヶ月前](https://ja.wordpress.org/support/topic/ipad%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e6%99%82%e3%81%ae%e7%89%b9%e5%ae%9acss%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-11683335)
 * 上手く動かないという事は、条件文に一致していない可能性があります。
 *     ```wp-block-code
       alert( ua );
       ```
   
 * と書いて、実機ではua という変数にどのような文字列が渡ってきているかを確認した
   り、
 *     ```wp-block-code
       alert( 'ontouchend' in document );
       ```
   
 * の結果が true になる事などを確認すればよいと思います。
 *  トピック投稿者 [osat99](https://ja.wordpress.org/support/users/osat99/)
 * (@osat99)
 * [3年、 5ヶ月前](https://ja.wordpress.org/support/topic/ipad%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e6%99%82%e3%81%ae%e7%89%b9%e5%ae%9acss%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-11683336)
 * どうですね、動かないということはないと思うので、おっしゃってるに確認作業が必要
   ですね。
 * ただ今回はメディアクエリで対応しましたので、また次回同じような場面に遭遇しましたら、
   試してみようかと思います！
 * この度はありがとうございました。

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

 トピック「iPadアクセス時の特定CSS読み込み方法について」には新たに返信することは
できません。

## タグ

 * [functions.php](https://ja.wordpress.org/support/topic-tag/functions-php/)
 * [if](https://ja.wordpress.org/support/topic-tag/if/)
 * [iPad](https://ja.wordpress.org/support/topic-tag/ipad/)
 * [USER_AGENT](https://ja.wordpress.org/support/topic-tag/user_agent/)

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6件の返信
 * 2人の参加者
 * 最後の返信者: [osat99](https://ja.wordpress.org/support/users/osat99/)
 * 最後の活動: [3年、 5ヶ月前](https://ja.wordpress.org/support/topic/ipad%e3%82%a2%e3%82%af%e3%82%bb%e3%82%b9%e6%99%82%e3%81%ae%e7%89%b9%e5%ae%9acss%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e6%96%b9%e6%b3%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-11683336)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック