2018年6月20日(水)
デバイス分岐 #HTML5&CSS3&JavaScript
Webページを作成するときに、デバイス分岐を熟知しておきたいものです。
スマホとタブレットとパソコンを区別してみましょう。
--
$ua = navigator.userAgent;
$ua = $ua.toLowerCase();
if( $ua.indexOf("Windows Phone")!=-1 ){
// Windows Phone
}else if( $ua.indexOf("iphone")!=-1 ){
// iPhone
}else if( $ua.indexOf("ipad")!=-1 ){
// iPad
}else if( $ua.indexOf("android")!=-1 ){
if( $ua.indexOf("mobile")!=-1 ){
// Android スマホ
}else{
// Android タブレット
}
}else{
// パソコン
}
--
日本では、スマホのほとんどがiPhoneとAndroidですが、Windows Phoneも0ではありません。実際に、我が奈半利町にWindows Phoneを利用されている方がおられてビックリしたのはついこの前のことでした。でも、Windows Phoneは、すぐフリーズして使い物にならないことが分かりました。
Windows Phoneのエージェントにはすべてのキーワードが含まれているので、筆頭に分岐を施します。相変わらず、Microsoftの嫌らしい戦術ですが、致し方ありません。
次いで、メインであるiOSとAndroidを分岐していきます。mobileが含まれているのは、iPhone、iPad、Androidスマホです。Andriodタブレットには、含まれていません。
残ったのはパソコンとなります。Windows、Macintosh、Linuxで分岐してから、ブラウザ分岐するのもいいでしょう。
なお、スマホとタブレットのブラウザは、iOS(iPhone、iPad)ではSafari、AndroidではGoogle Chromeが標準ですが、他のブラウザを利用されている少数派の方もおられます。必要に応じて、ブラウザ分岐しましょう。