レスポンシブレイアウトとデバイス解像度

レスポンシスブレイアウトではデバイスの横幅によってレイアウトを切り替えるために、デバイスの解像度について予め知っておく必要があります。この記事ではレスポンシブレイアウトの元になるとレイアウトの定義ルールのベストプラクティスを紹介します。

デバイスの寸法と解像度

スマートフォンとタブレットの主要なプラットフォームには Apple の iPhone、iPad と Google の Android がありますが、Apple のものについてのみ調査を行っています。Android については デバイスの開発メーカーが多数あり、多種多様なサイズがあり標準的なサイズとして絞ることが困難であるために調査を行っていません。現実的にAndroid をターゲットにする場合には、機種を絞る必要があるでしょう。

スマートフォン

iPhone
デバイス名 ポイント 解像度 スケール 対角寸法(inch)
iPhone3GS 320×480 320×480 x1 3.5
iPhone4,
iPhone4S
320×480 640×960 x2 3.5
iPhone5,
iPhone5C
iPhone5S
320×568 640×1136 x2 4
iPhone6(iPhone5 互換モード) 320×568 640×1136
(device 750×1334)
x2 x1.17 4.7
iPhone6 375×667 750×1334 x2 4.7
iPhone6 plus(iPhone5 互換モード) 320×568 640×1136
(device 1080×1920)
x2 x1.69 4.7
iPhone6 plus(iPhone6 互換モード) 375×667 1125×2001
(device 1080×1920)
x3 x0.96 4.7
iPhone6 plus 414×736 1242×2208
(device 1080×1920)
x3 x0.87 5.5

iPhone は iPhone6世代からレンダリングパスが複雑になりました。プログラムから見たピクセルはデバイス上のピクセルと整数倍に対応しなくなり、APIで透過的に 2倍、3倍にスケールして描画を行われ、デバイスの実際の解像度にダウンサンプリング、あるいはアップサンプリングが行われるようになりました。

スマートフォンの寸法を整理すると次のようになります。

対角寸法(inch)

  • 3.5
  • 4
  • 4.7
  • 5.5

スマートフォンの横幅の解像度を整理すると次のようになります。

ポートレイト

  • 320
  • 375
  • 414

ランドスケープ

  • 480
  • 568
  • 667
  • 736

タブレット

iPad
デバイス名 ポイント 解像度 スケール 対角寸法(inch)
iPad mini 768×1024 768×1024 x1 7.9
iPad mini2 768×1024 1536×2048 x2 7.9
iPad mini3 768×1024 1536×2048 x2 7.9
iPad Air 768×1024 1536×2048 x2 9.7
iPad Air2 768×1024 1536×2048 x2 9.7

タブレットの寸法を整理すると次のようになります。

対角寸法(inch)

  • 7.9
  • 9.7

タブレットの横幅の解像度を整理すると次のようになります。

ポートレイト

  • 768

ランドスケープ

  • 1024

iPad のタブレットは7.9インチと9.7インチの2つのサイズがありますが解像度は統一されています。9.7インチに対して7.9インチでは、ピクセル指定でレイアウトを行う場合、実際には約80%のサイズで描画されることになります。

Bootstrap3のグリッド定義

Twitter の公開しているスタイルシートの Bootstrap3 は デフォルトでレスポンシブレイアウトに対応しており、グリッドシステムや入力フォーム、モーダルダイアログなどのコンポーネントが、全てスクリーン幅に応じて最適な見た目に調整されます。Bootstrap3のグリッドシステムでは次の表に示すルールのとおりデバイスは4段階で定義されています。

定義名 対応幅(px) 対応デバイス
col-xs-* – 767 スマートフォン
col-sm-* 768 – 991 タブレット(ポートレイト)
col-md-* 992 – 1199 タブレット(ランドスケープ),
デスクトップ
col-lg-* 1200 – デスクトップ

スマートフォンやタブレットではデバイスを持つ方向(ポートレイト/ランドスケープ)で横幅が変わりますが、Bootstrap3 の定義上では、タブレットについては持ち方によって適用されるルールが変わります。しかし、スマートフォンのデバイス方向を区別していませんので、常に col-xs-* が適用されます。従って、スマートフォンのデバイス方向でレイアウトを変更したい場合にはルールを追加する必要があります。