jQueryでiPhone4/4SとiPhone5とAndroid系端末を判別する方法

jQuery
スポンサーリンク

端末によって違うテキストを出したいという要望がありました。特にiPhone4/4SとiPhone5の切り分け。分からなかったので調べました。

jQueryを使う意味がほぼない気もしますが…w

コード

jQueryを使う意味がほぼない気がしますが、気にしない。

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>iPhone4/4SとiPhone5とAndroid端末を判別するjQueryコード</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ //iPhoneの場合
    if ( navigator.userAgent.indexOf('iPhone') > 0 ) { //iPhoneの場合、さらに4/4sまたは5かを調べる
        if(window.devicePixelRatio > 0){
            height_num = screen.height * window.devicePixelRatio;
        }else{
            height_num = screen.height;
        } if( height_num == 1136){ $('#result').text('iPhone5だね');
        }else if(height_num == 960){
            $('#result').text('iPhone4または4Sだね');
        } //Androidの場合
    }else if( navigator.userAgent.indexOf('Android') > 0 ){
            $('#result').text('Androidだね');
    }else{
        $('#result').text('iPhoneでもAndroidでもないようだね');
    }
    });
</script>
</head>

<body>
<h1 id="result"></h1>
</body>
</html>

簡単な解説

iPhoneとAndroidの判別はよくあるユーザーエージェントを使って調べる方法です。

おおざっぱにiPhoneだと分かったら、4/4Sと5を調べるために、開いている端末の画面サイズ(高さ)を調べます。
普通に高さを取得しようとすると、旧端末(3GS/3G)などの兼ね合いで、旧機種のサイズとなってしまうらしいので、「window.devicePixelRatio」という値を使うそうです。

参考