IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

【JavaScript】超簡単!スマホかPCの判断のしかた | navigator.userAgent

f:id:Surprisedblog:20190608171727p:plain

 navigatorオブジェクトのuserAgentプロパティを使ってデバイスの判断をします。

userAgent

 userAgentでは、ブラウザのユーザエージェント情報を取得することができます。

ユーザエージェント情報には、OS、ブラウザそしてデバイス情報があります。

userAgent情報(あなたのユーザエージェント情報)

 

 

使用方法

 userAgentに含まれるデバイス情報をもとに、デバイス別に処理を実行するようにします。

var ua=navigator.userAgent
if (ua.match(/iphone|ipod|android.*mobile/i)) {
    //スマホの場合
}
else if (ua.match(/ipad|android/i)) {
    //タブレットの場合
}
else {
    // PCの場合
}

matchメソッドで、それぞれのデバイス名がuserAgentに含まれているかでデバイスの判断をしています。

 

matchメソッドには正規表現で文字列を指定しています。最後の「i」は大文字/小文字を区別させないためのフラグです。「|」は、「または(or)」を意味し、「iphoneまたはipod」などを表現します。「.*」は、「~と(and)」を意味し、「androidとmobile」などを表現します。(正確には、文字列1.*文字列2の場合、文字列1のあとに文字列2が0回以上という意味)

 

コチラのサイトは、デバイス別のuserAgent情報をみることができます。
https://qiita.com/nightyknite/items/b2590a69f2e0135756dc

効果

 navigator.userAgentを使用することで、デバイス別の動作を実現することができます。

 

 

それでは、良いプログラミングライフを。