JavaScriptテックラボ

スマートフォン(iPhone/Android)のページ内振り分け

ページ内でスマートフォンかどうかを判別し、表示を切り替えたい場合のスクリプトを紹介します。
JavaScriptでiPhone、Androidを識別してそれぞれの端末へメッセージを表示には、ユーザエージェントを使います。

navigator.userAgent

navigator.userAgent で取得したユーザエージェント情報から「iPhone」という文字が合った場合の処理をする場合は、 indexOf を使って以下のようにします。

/* iPhoneという文字が見つかった場合 */
if ( navigator.userAgent.indexOf('iPhone') > 0 ){
}

indexOf()メソッドは、指定したキーワードの発見位置を返します。発見できなければ-1の数値を返すので、値が0より上であればキーワードが発見できたと分かります。
iPhone/iPad/iPod/Android毎に処理を分けるには次のようにします。

<script type="text/javascript">
// iPhone
if ( navigator.userAgent.indexOf('iPhone') > 0 ){

// iPad
} else if( navigator.userAgent.indexOf('iPad') > 0 ){

// iPod
} else if( navigator.userAgent.indexOf('iPod') > 0 ){

// Android
} else if( navigator.userAgent.indexOf('Android') > 0 ){

}
</script>

iPhone/iPod/iPad/Androidの場合に何か処理したい場合は以下のとおりです。

<script>
// iPhone/iPad/iPod、Androidの場合は振り分けを判断
if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 
|| navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {

}
</script>

iPadやAndroidタブレットといったタブレット機種を除く、iPhone、Androidの場合に何か処理したい場合は以下のとおりです。

<script>
// iPhone/iPod、Androidの場合は振り分けを判断
if ( navigator.userAgent.indexOf('iPhone') > 0  
|| navigator.userAgent.indexOf('iPod') > 0 
|| (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) ) {

}
</script>

逆にiPhone、Android(iPad/Androidタブレット除く)以外の時に何か処理したい場合は以下のとおりです。

<script>
// iPhone/iPad/iPod、Androidの場合は振り分けを判断
if ( navigator.userAgent.indexOf('iPhone') == -1  
&& navigator.userAgent.indexOf('iPod') > == -1 
&& navigator.userAgent.indexOf('Android') == -1 ) {

}
</script>

関連記事