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