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以降です");
  }
}

参考カテゴリ

オススメ記事

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

標準出力と標準エラー出力をパイプに渡す

よく、標準出力先をファイルにリダイレクトすることはありますが、意外に標準エラー出力は使う機会がありません。しかし、やはりツールやパッケージ製品になると標準エラー出力も活用されているようです。でも、...

Linux(FreeBSD)

>>記事を確認する

主要無料ブログ5つに対する自動投稿PHPプログラム

アメブロへ楽天APIなどの情報を自動で投稿する の反響が良かったので、どうせならアメブロ以外の無料ブログの XML-RPC を使った自動投稿も紹介したいと思います。これには FC2BlogManager.php というライブ...

PHP

>>記事を確認する

snmpでデバイスの情報を取得

snmpでデバイスの情報を取得するコマンドです。これを元に、ディスクIOなどのMIB値を探します。 $ snmpwalk -v 2c -c {SNMPGROUPNAME} localhost 1.3.6.1.4.1.2021.13.15.1.1.2 (結果の一部) UCD-DIS...

Linux(FreeBSD)

>>記事を確認する

awkで指定したカラム以降をprint表示する

前回、awk で最後のカラム以外を表示してみましたが、今回は指定したカラム以降のカラムを全部表示したいと思います。 例えば、7 個の文字列がカンマで区切られているファイルがあるとしたら、3 番目のカラム...

awk / シェル

>>記事を確認する

CentOSでRedisサーバを使う

冗長化した Web サーバなどで、セッションの管理や、セッションや特定のユーザーに紐付く一時データを管理するのに memcache を使う場面は多いと思います。 その memcache の中でも主流なのが memcached です...

Linux(FreeBSD) / CentOS / Redis

>>記事を確認する

ドメイン取るなら低価格で楽々管理

バリュードメインは、GMO デジロック社の低価格ドメイン総合サービスです。

このサイト含め、私もこれまでに 100 個以上のドメインを取得して管理してきましたが、WHOIS の代理公開も可能なので、無料 SSL 証明書の Let's Encrypt と組み合わせれば、かなりの低価格で SSL サイトも運営できます。

年単位で領収証発行もしてくれるので、たくさんサイトを抱えているアフィリエイターや個人事業主にもオススメです。

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

MySQLでテーブル定義を取得

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

データベース / MySQL

>>記事を確認する

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

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

Windows / ツール

>>記事を確認する

Laravel5.1からLaravel5.5へアップデートする

LTS だった Laravel5.1 のバグフィックスサポートが 2017 年の 6 月で終わり、セキュリティサポートも 2018 年の 6 月で終了となります。 このタイミングで、兼ねてから発表のあった、次期 LTS の Laravel5.5...

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

>>記事を確認する

VagrantでCentOS6.9のイメージを使う

CentOS7 が既に 7.3 まで出ていますが、AmazonLinux がまだ 6 の構成と似ていることから、なかなか 7 系に移行できません。 そこで、Vagrant のイメージも 6 系の最新版を使うと思ったのですが、下記の BOX ...

Linux(FreeBSD) / CentOS / Vagrant

>>記事を確認する