ユーザーエージエントでブラウザ・モバイル端末ごとに分岐させる
最終更新日: Update!!
クライアント案件にて使う場面が出てきたのでとりあえず備忘録としてのメモです。今回はJavaScriptでブラウザやモバイル端末ごとに挙動を変えたい場合に使いました。ユーザーエージェントを取得し、そこに含まれている情報を元に分岐させています。
【javascript】
var ua = window.navigator.userAgent.toLowerCase(); // ブラウザ var ie6 = ua.indexOf("msie 6.") != -1; var ie7 = ua.indexOf("msie 7.") != -1; var ie8 = ua.indexOf("msie 8.") != -1; var ie9 = ua.indexOf("msie 9.") != -1; var ie10 = ua.indexOf("msie 10.") != -1; var ie11 = ua.indexOf("trident/7") != -1; var edge = ua.indexOf("edge") != -1; var firefox = ua.indexOf("firefox") != -1; var opera = ua.indexOf("opr") != -1; var chrome = ua.indexOf("chrome") != -1 && ua.indexOf("edge") == -1 && ua.indexOf("safari") != -1; var iosChrome = ua.indexOf("crios") != -1 && ua.indexOf("mobile") != -1 && ua.indexOf("safari") != -1; var iosSafari = ua.indexOf("mobile") != -1 && ua.indexOf("safari") != -1; var iosSafari = ua.indexOf("safari") != -1; if (ie6) { alert("IE6"); } else if (ie7) { alert("IE7"); } else if (ie8) { alert("IE8"); } else if (ie9) { alert("IE9"); } else if (ie10) { alert("IE10"); } else if (ie11) { alert("IE11"); } else if (edge) { alert("Edge"); } else if (firefox) { alert("Firefox"); } else if (opera) { alert("Opera"); } else if (chrome) { alert("Google Chrome"); } else if (iosChrome) { alert("Google Chrome iOS"); } else if (iosSafari) { alert("Safari iOS"); } else if (safari) { alert("Safari"); } // モバイルデバイス var ipod = ua.indexOf("ipod") != -1; var iphone = ua.indexOf("iphone") != -1; var ipad = ua.indexOf("ipad") != -1; var android = ua.indexOf("android") != -1 && ua.indexOf("mobile") != -1; var androidTablet = ua.indexOf("android") != -1 && ua.indexOf("mobile") == -1; if (ipod) { alert("iPod"); } else if (iphone) { alert("iPhone"); } else if (ipad) { alert("iPad"); } else if (android) { alert("Android"); } else if (androidTablet) { alert("Android Tablet"); }このユーザーエージェントですが、例えばGoogle ChromeのものにもSafariの文字が含まれていたりと少しややこしいケースもあります。ですので、上記の順に指定してあげることが重要になってきます。 ただし、ユーザーエージェントについてはブラウザやデバイスのバージョンが上がるごとに微妙に違いがあるようですので、都度ユーザーエージェントを取得して確認した上で条件分岐させた方が良さそうです。ですのでユーザーエージェントについては変数で保持しておいた方が改修時にラクかもしれません。今回のサンプルはこちらにありますので、お使いのブラウザやモバイル端末でも確認いただけます。 (参考にさせて頂いたサイト) JavaScriptでUserAgentを使った判別をする
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories