Q&A
ありがとうございます。
頂いたコードで試したところスマホもipadもPCも反映されました。
コンソールに出そうとしましたが何も出ませんでした。
書き方を間違えたでしょうか
$(function () {
var ua = navigator.userAgent;
console.log(ua);
})
jQuery のユーザーエージェント判定を使って、ipadだけcssをつけたい。
pcやスマホには反映させず、ipadだけcssをつけようと、
jQuery のユーザーエージェント判定を使いましたが全く無反応でした。
どこか間違えているのでしょうか。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>テスト</title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 7<script type="text/javascript"> 8 $(function () { 9 var ua = navigator.userAgent; 10 if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) { 11 // スマートフォン用コード 12 } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) { 13 // タブレット用コード 14 $("nav .button").addClass("button--w"); 15 } else { 16 // PC用コード 17 } 18 }) 19</script> 20</head> 21<body> 22 23<style> 24nav .button--w { 25 background: red; 26} 27</style> 28<nav> 29<div class="button">w</div> 30</nav> 31</body> 32</html>
補足情報（FW/ツールのバージョンなど）
ipadの実機ではなく、ブラウザ(safari)のレスポンシブデザインモードで、ipadにして確認しています。
ユーザーエージェントの記述はこちらから持ってきました。
https://qiita.com/torugatoru/items/2dc895d5db7fc839a8bc
回答4件
0
自己解決
私がipadの実機ではなく、ブラウザ(safari)のレスポンシブデザインモードで確認していたのが間違いだったようです。
ブラウザでは動きませんが、ipadの実機では質問文のコードで動くものと思われます。
投稿2019/02/27 11:10
総合スコア81
0
細かい話ですが、
jQuery のユーザーエージェント判定
jQueryにUA判定機能はありません。
navigator.userAgentはブラウザのAPIです。
https://developer.mozilla.org/ja/docs/Web/API/NavigatorID/userAgent
ua.indexOf('iPad') > 0
一応、この判定でも今回のif文は動作するはずですが、String.prototype.indexOf()の使い方が危ういです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
値が見つからない場合は -1 を返しますので、> 0だと将来的にiPadが先頭文字列で返ってきた場合にアウトです。
以上を踏まえまして
ipadの実機ではなく、ブラウザ(safari)のレスポンシブデザインモードで、ipadにして確認しています。
実機では大丈夫なのではないでしょうか？
質問のコードではhtmlとjsが読み込まれた後、すぐに実行されるのですが、その時はnavigator.userAgentの値にiPadはないはずです。
ということで、デバッグ方法を覚えると良いかと思います。
例えば以下のコードではどうなりますか？
js
1$(function () { 2 var ua = 'Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1'; 3 if (ua.indexOf('iPhone') > -1 || ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1) { 4 // スマートフォン用コード 5 } else if (ua.indexOf('iPad') > -1 || ua.indexOf('Android') > -1) { 6 // タブレット用コード 7 $("nav .button").addClass("button--w"); 8 } else { 9 // PC用コード 10 } 11})
ユーザーエージェント文字列を固定で記述し、動作確認を行います。
問題ないならば、次はnavigator.userAgentの値を疑います。
js
1$(function () { 2 var ua = navigator.userAgent; 3 console.log(ua); 4 以下略
恐らくここで想定外の値がコンソールに表示されていると思います。
投稿2019/02/27 10:31
編集2019/02/27 10:35
総合スコア764
コンソール画面を出した後、リロードするか、コンソールで直接jsを貼り付けて実行してみてください。
▼w (1) = $2
▶︎#document
▶︎wプロトタイプ
コンソールに直接貼り付けたところ、よくわからないものが出ました。
デバッグを真面目にやって下さい。jQuery
の即時関数は省くとか多少の工夫はしてくださいませ。console.logでの確認ができないなら、alertを使うなり、document.writeするなり文字列の確認手段などいくらでもありますので、重要なのはuaの値です。
私の意図は、言われたとおりにするのではなく、自分で問題を解決していく力（デバッグ力）が重要だと言うことです。
ありがとうございます。
コンソールでuaが確認できるのも知りませんでした。
またいじってみてみます。
まだあまりコンソールにも慣れていなくて難しい操作ができませんが
いろいろ試行錯誤してみます。
0
iPadのユーザーエージェントには'Mobile'の文字列が含まれています。
http://www13.plala.or.jp/bigdata/user_agent.html
なので、最初のif文で「スマートフォン用コード」の処理に流れてしまい、
addClassが実行されていないと思います。
投稿2019/02/27 09:53
総合スコア16
ありがとうございます。
最初のところを下記のようにしましたが、ダメでした。
if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 ) {
色々やってみたところ、「スマートフォン用コード」のところにaddClassの行を書くと、
スマホもipadもPCも反映されました。
すみません。コードには特に問題ないようでした。
手元のSafariにてレスポンシブモードで確認したところ、確かにボタンにスタイルが反映しませんでした。
どうやら、Safariのレスポンシブモードではユーザーエージェントは反映してくれないみたいです。
他のブラウザでユーザーエージェントを変更するアドオンや開発ツールなどを使って確認してみてはいかがでしょうか。
ありがとうございます。
そうなんですね。やはり実機で確認しないとダメですね。ipad持ってる人を探してみます。
お手数おかけしました。
0
htmlの構造も提示されていないし
JSが無効なのか、CSSが無効なのかわかりません
とりあえずスタティックなCSSで試してみては？
CSS
1<style> 2nav .button--w { 3 background: red; 4} 5</style> 6<nav> 7<div class="button button--w">w</div> 8</nav>
※buttonタグではなくクラスbuttonの要素に追加してますね
投稿2019/02/27 09:37
編集2019/02/27 09:38
総合スコア114829
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。