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

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

記事一覧JavaScriptで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以降です");
  }
}

参考カテゴリ

オススメ記事

最新の投稿やよく見られているのオススメ記事一覧です。

新しいぐるなびAPIで飲食店の店舗情報取得

過去に作成した「ぐるなびAPI」のプログラムや、ぐるなびの Web Service が新しくなったこともあり、API からの情報取得プログラムを書き換えてみました。 以前の記事は下記になります。 ・ ぐるなびAPIで...

WebAPI

>>記事を確認する

NginxのFastCGIキャッシュで白い画面がキャッシュされる

以前から、トップページにアクセスすると、レスポンスステータスは 200 で返ってくるのに、画面に何も表示されない現象が稀に見受けられたので調査してみました。 さすがに機会損失にも繋がるということで、...

Nginx

>>記事を確認する

Laravel5.4の認証ユーザーのパスワードハッシュについて

Laravel で用意されている認証モジュールを利用する際、ユーザーモデル(User.php)経由で登録されるパスワードのハッシュ方法について調べてみました。 Laravel 上ではパスワード文字列を bcrypt() のヘルパー...

PHP / Laravel

>>記事を確認する

Laravel5.4のコントローラコンストラクタでAuth::user()が取得できない

Laravel5.4 で認証を通したアクセスに対して、コントローラのコンストラクタでユーザモデルの値を取得しようと思ったら、なぜか Auth::user() の値が取得できなくて悩みました。 public function __construc...

PHP / PHPフレームワーク / Laravel

>>記事を確認する

NginxのHSTS(HTTP Strict-Transport-Security)の設定

「Let's Encrypt」のおかげで、全サイト SSL 化していますが、これまで nginx の設定では、http のアクセスがあった場合に https に 301 リダイレクトさせていました。 この場合、Googlebot に http のアク...

セキュリティ / Nginx / SSL

>>記事を確認する

GoogleMapのAPIキーの認証情報にリファラURL設定

昔は API キーを指定することで、JavaScript で GoogleMap が表示できていましたが、何年か前に、そのキーに対して認証情報の追加が推奨されました。 新規で発行する場合は必須になっているかもしれませんが...

Web全般 / WebAPI

>>記事を確認する

AmazonLinuxでApache2.4+php7.1+Laravel5.5

先日、「 VagrantでCentOS6.9のイメージを使う 」の通り、CentOS6.9 には Apache2.4 と PHP7.1 で Laravel のフレームワークが使える環境を構築しました。 ただ、将来的には AWS かつ Amazon Linux 上で動か...

Apache / PHP / AWS / PHPフレームワーク / Laravel

>>記事を確認する

AWSの無料利用枠内で複数サイトをサクサクと運営する方法

MySQLでテーブル定義を取得

似たような構成のテーブルを作る時に、今までは mysqldump コマンドで -d オプションを付けて実行していました。 これでも十分に要件は満たせるのですが、MySQL のコンソールからサクっと出したい場合もある...

データベース / MySQL

>>記事を確認する

Poderosa5の登場と文字色と背景色

新しい PC を購入したので、久し振りに Poderosa のインストールをしたのですが、Poderosa-Terminal として最新バージョンの 5 が 2016 年に登場していました。 これ、職場でもインストールしてみたのですが...

Windows / ツール

>>記事を確認する