icon_topicsテクニック

JavaScriptでAndroid端末とiOS端末を区別して処理する方法

スマホサイト作成時などにAndroidとiOSで「ちょっとCSSを別にしたいなー」という時はよくあります。
最近このようなことがあったのでメモがてら皆様のお役に立てれば良いなと思います。

区別する際にはユーザーエージェントで判別しますが、iOSの場合はデバイスごとに違うようなので、どうせなら全部判別できるようにしました。

// iPhone
if (navigator.userAgent.indexOf('iPhone') > 0){
  //iPhoneで処理したい命令を書きます
// iPad
} else if(navigator.userAgent.indexOf('iPad') > 0){
  //iPadで処理したい命令を書きます
// iPod
} else if(navigator.userAgent.indexOf('iPod') > 0){
  //iPodで処理したい命令を書きます
// Android
} else if(navigator.userAgent.indexOf('Android') > 0){
  //Android端末で処理したい命令を書きます
}

コード自体はとてもシンプルですね。

iOSとAndroidで区別したい場合は、「||」でiOS端末をまとめたほうが後が楽だと思います。

if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 
|| navigator.userAgent.indexOf('iPod') > 0){
  //iOSで処理したい命令を書きます
} else if(navigator.userAgent.indexOf('Android') > 0) {
  //Androidで処理したい命令を書きます
}

こんな感じです。

AndroidとiOSは画面処理の仕方がかなり違うので、振り分けはかなり多用しました。
レスポンシブデザインにしておけばこんな苦労は無かったかもなー、と思ったりもしますが・・・