OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

ユーザーエージエントでブラウザ・モバイル端末ごとに分岐させる

最終更新日:2018.4.18 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を使った判別をする
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram