0%

Programmingプログラミングナレッジ

Posted:2018.04.17

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

クライアント案件にて使う場面が出てきたのでとりあえず備忘録としてのメモです。今回は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を使った判別をする

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】