問題
javascriptで、閲覧している端末を判定し、処理を振り分けたい。
解決策
「window.navigator.userAgent」でユーザーエージェント情報を参照し、端末を示す文字列が含まれているかどうかを「match()」で判定し、処理を振り分ける。
見ている端末ごとで操作を振り分けたい。
javascriptでユーザーエージェントを参照し、見ている端末ごとで操作を振り分けたい場合の判定方法をご紹介します。
ユーザーエージェント情報の取得
見ている端末を判定するには、ユーザーエージェント情報を取得する必要があります。
javascriptでユーザーエージェント情報を取得するには、以下の記述を行います。
var useragent = window.navigator.userAgent;こちらを出力すると、以下のような結果が得られます。
- ※現在のご覧いただいているユーザーエージェント情報が下記に出力されます。
何らかの要因により、出力結果が表示されません。
ユーザーエージェント情報の出力例
PC（windows）でChromeブラウザの場合
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
スマートフォン（Android）でChromeブラウザの場合
Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Mobile Safari/537.36
スマートフォン（iPhone）でChromeブラウザの場合
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1
ユーザーエージェント情報を元に、端末を判定する。
- 上記の出力例をご覧いただくと、OSの情報の記載が確認できます。
Windows、Android、iPhone、それぞれの情報が得られています。 - さらに、スマートフォンの出力例の後の方には「Mobile」という記述が確認できます。
この2点の記載の特徴を元に、振り分けを行います。
if(window.navigator.userAgent.match(/(iPhone|iPod|Android.*Mobile)/i)){
// スマホ（iPhone・Androidスマホ）の場合の処理を記述
}else{
// PC・タブレットの場合の処理を記述
}参考ページ
【使用してるブラウザを判定したい – Qiita】
https://qiita.com/sakuraya/items/33f93e19438d0694a91d
コメント