iPhone画面のサイズ一覧表
iPhoneはこれまでに様々な機種が機種が発売されていて、機種によって画面の大きさは異なっています。アプリをデザインするにはポイントやピクセルという座標や画面の大きさを正しく把握しておく事が大切なので、これらの画面サイズを一覧表にまとめました。
| iPhone機種名 | インチ | ポイント | ピクセル | 倍率 | 縦横比 |
| 3G, 3GS | 3.5 | 320 x 480 | 320 x 480 | 1 | 1.5 |
| 4, 4s | 3.5 | 320 x 480 | 640 x 960 | 2 | 1.5 |
| 5, 5s, 5c, SE | 4.0 | 320 x 568 | 640 x 1136 | 2 | 1.775 |
| 6, 6s, 7, 8, SE 2nd | 4.7 | 375 x 667 | 750 x 1334 | 2 | 1.778 |
| 12 mini | 5.4 | 375 x 812 | 1080 x 2340 | 3 | 2.165 |
| 6 plus, 6s plus, 7 plus, 8 plus | 5.5 | 414 x 736 | 1242 x 2208 | 3 | 1.778 |
| X, XS, 11Pro | 5.8 | 375 x 812 | 1125 x 2436 | 3 | 2.165 |
| XR, 11 | 6.1 | 414 x 896 | 828 x 1792 | 2 | 2.164 |
| 12, 12 Pro | 6.1 | 390 x 844 | 1170 x 2532 | 3 | 2.164 |
| XS Max,11 Pro Max | 6.5 | 414 x 896 | 1242 x 2688 | 3 | 2.164 |
| 12 Pro Max | 6.7 | 428 x 926 | 1284 x 2778 | 3 | 2.164 |
| 13 mini | 5.4 | 375 x 812 | 1080 x 2340 | 3 | 2.167 |
| 13, 13 Pro | 6.1 | 390 x 844 | 1170 x 2532 | 3 | 2.164 |
| 13 Pro Max | 6.7 | 428 x 926 | 1284 x 2778 | 3 | 2.164 |
| 14, 14Pro | 6.1 | 390 x 844 | 1170 x 2532 | 3 | 2.164 |
| 14 Plus | 6.7 | 428 × 926 | 1284 x 2778 | 3 | 2.164 |
| 14 Pro Max | 6.7 | 430 x 932 | 1290 x 2796 | 3 | 2.167 |
| SE 3rd | 4.7 | 375 x 667 | 750 x 1334 | 2 | 2.165 |
| 15, 15 Pro | 6.1 | 393 × 852 | 1179 × 2556 | 3 | 2.167 |
| 15 Plus, 15 Pro Max | 6.7 | 430 × 932 | 1290 × 2796 | 3 | 2.167 |
| iPhone機種名 | インチ | ポイント | ピクセル | 倍率 | 縦横比 |
- インチ(inch)：実際のiPhoneのハード的な画面の大きさ
- ポイント(point)：プログラムを作成する時のプログラム内部的な画面の大きさ
- ピクセル (pixel)：実際の画面のハード的なピクセル数（ドット数）
- 倍率(scale)：ポイントを拡大してピクセル表示するときの倍率
- 縦横比：縦/横の比率
画面のサイズを変更する
Xcodeの画面サイズ（表示スケール）はデフォルトで決まっていますが、変更する事ができます。試しに次の赤い車（160×160ピクセル ）と青い車（160×160ピクセル ）を表示してみます。
ここで細かい説明はしませんが、Xcodeで次のコードを記述します。赤い車を座標[0,0]、青い車を座標[375,0]と[160,0]に表示します。
//背景色の設定
self.backgroundColor = UIColor(red:0.2, green:0.7, blue:0.2, alpha: 1.0)
//赤い車
let carRedNode = SKSpriteNode(imageNamed:"carRed")
self.addChild(carRedNode)
carRedNode.position = CGPoint(x: 0, y: 0)
//青い車１
let carRedNode2 = SKSpriteNode(imageNamed:"carBlue")
self.addChild(carRedNode2)
carRedNode2.position = CGPoint(x: 375, y: 0)
//青い車２
let carRedNode3 = SKSpriteNode(imageNamed:"carBlue")
self.addChild(carRedNode3)
carRedNode3.position = CGPoint(x: 160, y: 0)
このプログラムを実行すると、左のような表示になります。座標[0,0]は画面の中央になり、[0,375]に表示した青い車が丁度画面の境目に表示されています。画面の横幅が750である事がわかります。
次は、下記のコードを追加で記述してみましょう。
print("初期の画面サイズ",self.size)
self.size = CGSize(width: 400, height: 866)
print("変更後の画面サイズ",self.size)
もう一度プログラムを実行すると、先ほどより画像が大きく表示されているのが判ると思います。画面サイズを[750,1334]から[400,866]に変更しています。
Xcodeの画面のテキスト表示でも、画面サイズが変更されているのが判ると思います。
