JavaScriptテックラボ

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

2012年1月31日

ページ内でスマートフォンかどうかを判別し、表示を切り替えたい場合のスクリプトを紹介します。
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>

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

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

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。