iPhone 13 Pro Max、iPhone 13 Pro、iPhone 13、iPhone 13 mini のポイント、論理ピクセル、物理ピクセルをまとめました。
デバイスとポイントの対応表
| デバイス | ポイント |
|---|---|
| iPhone 13 Pro Max | 428 × 926 |
| iPhone 13 Pro | 390 × 844 |
| iPhone 13 | 390 × 844 |
| iPhone 13 mini | 375 × 812 |
HTML や CSS のプログラマーは基本的にこの値からメディアクエリーを設定します。
デバイス、ポイント、論理ピクセル、物理ピクセルの対応表
| デバイス | ポイント | スケール | 論理ピクセル | リサイズ | 物理ピクセル |
|---|---|---|---|---|---|
| iPhone 13 Pro Max | 428 × 926 | 3 | 1284 × 2778 | 1 | 1284 × 2778 |
| iPhone 13 Pro | 390 × 844 | 3 | 1170 × 2532 | 1 | 1170 × 2532 |
| iPhone 13 | 390 × 844 | 3 | 1170 × 2532 | 1 | 1170 × 2532 |
| iPhone 13 mini | 375 × 812 | 3 | 1125 × 2436 | 1 | 1080 × 2340 |
サイズは次のように理解します。
- ポイント
- 論理ピクセル
- 物理ピクセル
プログラマーはポイント、ユーザーは物理ピクセルを見ます。ポイントと物理ピクセルをつなぐサイズが論理ピクセルです。
ポイントと論理ピクセル、論理ピクセルと物理ピクセルの間に倍率があります。ほとんどのデバイスで論理ピクセルと物理ピクセルは等しくなりますが、mini がつくデバイスは等しくならず、倍率が 1 以外の値になります。
ポイント
ポイントはプログラムが使う論理的なサイズで、CSS で設定するピクセルはポイントの値です。
ポイントは
- ビューポート・ピクセル
- ビューポート・ポイント
- ビューポート・サイズ
- ビューポート
- 解像度（ポイント）
- スクリーン（ポイント）
- スクリーン・ポイント
とも言われる。論理解像度という言い方をする場合もありますが、少しまぎらわしい。この多様な言い方が開発者を混乱に陥れている。プログラマーはポイントというシンプルな言葉で理解するといいと思います。
論理ピクセル
デバイスが描画する論理的なサイズ。デバイスについているディスプレイのサイズ…とは限らない。
レンダリングによって、アイテムのサイズはポイントという抽象的な概念からデバイスのピクセルという具体的な概念に変わります。
しかし論理ピクセルはディスプレイに実際に表示されるサイズとは限りません。
論理ピクセルをポイントで割った値
論理ピクセル ÷ ポイント
の値をスケールといいます。または
- Device Pixel Ratio
- レンダー・スケール
- レンダリング・スケール
- ピクセル・レシオ
という場合もあります。スケールは整数値で、最近は 3 が主流です。
物理ピクセル
実際のディスプレイのサイズを物理ピクセルといいます。ほとんどのデバイスで物理ピクセルと論理ピクセルは等しくなります。
iPhone 13 mini などは物理ピクセルと論理ピクセルが違います。
物理ピクセルは
- 解像度
- スクリーン・サイズ
- スクリーン・ピクセル
- デバイス解像度
- デバイス・ピクセル
とも言われます。
物理ピクセルを論理ピクセルで割った値
物理ピクセル ÷ 論理ピクセル
をリサイズといいます。
