JavaScript

JavaScriptでiPhoneの機種別の判定方法

iPhone の機種判定を実装しようと思って UserAgent(UA)で判別しようと思ったのですが、Android と違って iPhone は iOS のバージョンまでは UA に含まれますが機種名は含まれないことに気付きました。

一般的には、JavaScript(JS)側で画面サイズを使って判定している人が多いようですので、サーバサイド側に判定ロジックを入れるのは無理がありそうですね。

また、iPhone4 と iPhone4s、iPhone5 と iPhone5s のように、JS で取得できる情報だけでは区別がつかない場合もあるのでフロントエンドでも何かと大変そうです。

今回は、iPhone4 以降と iPhone5 以降の機種を判別したかったので、画面サイズとRetina(レティナ)ディスプレイかどうかの 2 つの要素で判定してみました。

こちらの方法を紹介したいと思います。

機種ごとの画面の高さとピクセル比率

画面の高さやピクセル比率は window オブジェクトから取得できます。

詳しくは Mozilla の開発者向けサイトで確認してください。

画面の高さの取得

画面の高さをピクセル単位にしたものが、JS では window.screen.height で取得できます。

window.screen.height についての詳細は下記のサイトがわかりやすいです。

調べたところによると、iPhone4s 以降の window.screen.height の値は以下になります。

iPhone4s –> 480
iPhone5 –> 568
iPhone5s –> 568
iPhone6 –> 667
iPhone6s –> 736

ピクセル比率

デバイス・ピクセルと CSS ピクセルの比率を表したものは、JS では window.devicePixelRatio で取得できます。window.devicePixelRatio についての詳細は下記のサイトがわかりやすいです。

いまさら聞けないRetina対応のための「ピクセル」の話

調べたところによると、iPhone4s 以降の window.devicePixelRatio の値は以下になります。

iPhone4s –> 2
iPhone5 —> 2
iPhone5s —> 2
iPhone6 —> 2
iPhone6s —> 2

iPhone の場合、iPhone6 Plus は window.devicePixelRatio が 3 になりますが、それ以外は 2 のままなのでこれだけで iPhone4 と iPhone5 の機種判定をするのは難しそうです。

よって、4 と 5 は画面の高さで判定するのが確実です。

機種判定

まず iPhone5 以降を調べる際は、window.screen.height が 568 以上かどうかで対応できそうです。

今後登場する機種(iPhone7以降)で画面サイズが iPhone5 より小さくなったりするとダメですが、iPhone6s までしか発売されていない現状だとこれで大丈夫そうです。

また、その結果を踏まえて iPhone4 以降を調べる場合は Retina 対応しているかどうかの判定が使えるので、window.devicePixelRatio が 2 以上で判断できそうです。

今回は 2 以上としてそのままコードに落とし込みましたが、好みによって 1 より大きいなどに置き換えてください。

組み合わせるとこんな感じになります。