2015/01/14 エンジニア

iPhone6、Plusのレスポンシブデザインで把握しておくべき画面サイズとデバイス・ピクセル比

iPhone6、Plusのレスポンシブデザインで把握しておくべき画面サイズとデバイス・ピクセル比 iPhone6になって画面サイズが大きくなり、iPhone6 Plusではデバイス・ピクセル比が3になっているため、レスポンシブウェブデザインを見直す必要があります。レスポンシブウェブデザインをする上で知っておくべき、各機種の画面サイズと、デバイス・ピクセル比の概念について解説します。

画面サイズ

iPhone6、iPhone6 Plusでは画面サイズが大きくなったので、レスポンシブウェブデザインの場合、ブレイクポイント(CSSが切り替わる画面幅)も見直す必要があります。

(画面サイズwidth × height)
iPhone6 Plus:414 × 736
iPhone6:375 × 667
iPhone5,5s,5c:320 × 568
iPhone4,4S:320 × 480

デバイス・ピクセル比

デバイス・ピクセル比(device pixel ratio)はデバイス・ピクセルとCSSピクセルの比率のことで、デバイス・ピクセルは物理的なピクセル数(PCやスマートフォンの画面ののピクセル数)、CSSピクセルは論理上のピクセル数(Webデザイン上で使用するピクセル数)を指します。

例えばiPhone3のデバイスピクセルは320 × 480、CSSピクセルも同じく320 × 480であるため、両者の比率は一緒です。
しかし、iPhone4以降でRetinaディスプレイが採用されてから解像度が縦横ともに液晶画面の2倍になり、デバイスピクセルとCSSピクセルの数が異なるようになりました。
Retinaディスプレイの機種でデバイスピクセルをベースに画像を表示すると縦2×横2で4倍で描画されるため、テキストや画像が4分の1のサイズで表示されてしまい見にくくなってしまいます。
そのため、画面上で表示するCSSピクセルとの比率を考慮し、縦2×横2の4倍のデバイス・ピクセルで描画しています。

デバイス・ピクセル比に伴う画像サイズの変更

ここで問題となるのが画像サイズです。
デバイス・ピクセル比が1であったiPhone3なら綺麗に見えていた画像も、Retinaディスプレイを採用していてデバイス・ピクセル比が2のiPhone4、iPhone5、iPhone6では画像が2倍に表示されるため、画像がぼやけて見えてしまいます。
そのため、デバイス・ピクセル比が2以上の機種では、画像 × デバイスピクセル比の画像を用意する必要があります。

iPhone6のデバイス・ピクセル比は2なのでiPhone4、iPhone5と同じですが、iPhone6 Plusのデバイス・ピクセル比は3、つまり画像が3倍で表示されます。
3倍の画像を用意した方が綺麗に見えますが、倍にするほど画像の容量が増えてしまうという懸念があります。
しかし、人間の目で見て違いが分からない程度だそうなので、従来どおり画像サイズは2倍でも問題ないようです。
システムエンジニア/SEの求人案件 システムエンジニア/SEの求人案件

システムエンジニアやプログラマーの求人・案件情報です。
フリーエンジニアや転職者向けに常時3000件以上の仕事情報を公開しています。