レスポンシスブレイアウトではデバイスの横幅によってレイアウトを切り替えるために、デバイスの解像度について予め知っておく必要があります。この記事ではレスポンシブレイアウトの元になるとレイアウトの定義ルールのベストプラクティスを紹介します。
デバイスの寸法と解像度
スマートフォンとタブレットの主要なプラットフォームには Apple の iPhone、iPad と Google の Android がありますが、Apple のものについてのみ調査を行っています。Android については デバイスの開発メーカーが多数あり、多種多様なサイズがあり標準的なサイズとして絞ることが困難であるために調査を行っていません。現実的にAndroid をターゲットにする場合には、機種を絞る必要があるでしょう。
スマートフォン
| デバイス名 | ポイント | 解像度 | スケール | 対角寸法(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
タブレット
| デバイス名 | ポイント | 解像度 | スケール | 対角寸法(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-* が適用されます。従って、スマートフォンのデバイス方向でレイアウトを変更したい場合にはルールを追加する必要があります。