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