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

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

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

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

一般的には、JavaScript(JS)側で画面サイズを使って判定している人が多いようですので、サーバサイド側に判定ロジックを入れるのは難しいでしょうか。また、iPhone4 と iPhone4s、iPhone5 と iPhone5s のように、JS で取得できる情報だけでは区別がつかない場合もあるので何かと大変そうです。

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

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

画面の高さやピクセル比率は window オブジェクトから取得できます。詳しくは Mozilla の開発者向けサイトで確認してください。

window - Web API インターフェイス

画面の高さ

画面の高さをピクセル単位にしたものが、JS では window.screen.height で取得できます。window.screen.height についての詳細は下記のサイトがわかりやすいです。

window.screen.height - Web API インターフェイス

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

  • iPhone4s --> 480
  • iPhone5 --> 568
  • iPhone5s --> 568
  • iPhone6 --> 667
  • iPhone6s --> 736

ピクセル比率

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

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

調べたところによると、iPhone4s 以降の window.devicePixelRatio の値は以下になります。iPhone の場合、iPhone6 Plus は window.devicePixelRatio が 3 になりますが、それ以外は 2 のままなので、これだけで iPhone4 と iPhone5 の機種判定をするのは難しそうです。よって、4 と 5 は画面の高さで判定するのが確実です。

  • iPhone4s --> 2
  • iPhone5 --> 2
  • iPhone5s --> 2
  • iPhone6 --> 2
  • iPhone6s --> 2

機種判定

まず iPhone5 以降を調べる際は、window.screen.height が 568 以上かどうかで対応できそうです。今後、登場する機種(iPhone7以降)で画面サイズが iPhone5 より小さくなったりするとダメですが、iPhone6s までしか発売されていない現状だとこれで大丈夫そうです。

// UAの取得
var ua = navigator.userAgent.toLowerCase();

if (ua.indexOf("iphone") != -1 && window.screen.height >= 568) {
  alert("iPhone5以降です");
}

また、その結果を踏まえて iPhone4 以降を調べる場合は Retina 対応しているかどうかの判定が使えるので、window.devicePixelRatio が 2 以上で判断できそうです。今回は 2 以上としてそのままコードに落とし込みましたが、好みによって 1 より大きいなどに置き換えてください。

// UAの取得
var ua = navigator.userAgent.toLowerCase();

if (ua.indexOf("iphone") != -1 && window.devicePixelRatio >= 2) {
  alert("iPhone4以降です");
}

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

// UAの取得
var ua = navigator.userAgent.toLowerCase();

if (ua.indexOf("iphone") != -1) {
  if (window.screen.height >= 568) {
    alert("iPhone5以降です");
  } else if (window.devicePixelRatio >= 2) {
    alert("iPhone4以降です");
  }
}

最終更新日:

関連記事

人気記事

新着情報