px、dpr、dpi、dip を完全に理解する

はじめに

media query を使い始めてから、これらの意味を理解するのにかなりの時間を要しました

デバイスピクセル

デバイスピクセル（Device Pixels）：デバイス画面の物理ピクセルで、単位は px です。例えば iPhone6 の 750x1334px

P.S. 絶対長さ単位（例：in、mm）ではなく、画面上にいくつの点を敷き詰められるかを表します。私の点とあなたの点の大きさは異なるためです

解像度

解像度（Resolution）も物理的な概念で、その意味は対象によって異なります

画面の場合、解像度は通常、表示される物理ピクセルの総和を表します。例えば、iPhone6 の画面解像度は 750x1334px と言います

画像の場合、概念は画像サイズ、画像の大きさ、ピクセルサイズなどと同等です。例えば、20x20px の icon と言います

P.S. 厳密に言えば、画像解像度の単位は ppi（Pixels Per Inch）です。画像ファイルの場合、そのピクセルサイズは一定であり、解像度 200ppi などのカメラからの meta 情報を含む場合があります。この値は推奨値に過ぎず、画像を表示した際に見えるサイズは画面のピクセル密度によって決定されます。ピクセル密度が高いほど、画像は小さく見えます

CSS ピクセル

CSS ピクセル（CSS Pixels）：Web プログラミングの概念で、CSS スタイルコードで使用される論理ピクセルを指します

したがって、1 つの CSS ピクセルは異なるデバイスで異なる物理ピクセル数に対応する可能性があり、この比率はデバイスの属性（Device Pixel Ratio、デバイスピクセル比）です

CSS 仕様では、長さ単位は絶対単位と相対単位に分けることができます。px は相対単位で、デバイスピクセル（Device Pixels）に対する相対単位です。例えば iPhone5 は Retina 视网膜スクリーンを使用しており、2x2 の Device Pixel で 1x1 の CSS Pixel を表すため、デバイスピクセル数は 640x1136px、CSS 論理ピクセル数は 320x568px です

デバイスピクセル比

デバイスピクセル比の略称は DPR または DPPX で、以下の通りです：

Device Pixel Ratio: Number of device pixels per CSS Pixel
Dots Per Pixel: the amount of device pixels per CSS pixel (e.g. in Retina displays this will be 2).

通常は DPR と言います。wiki の定義：

Device pixel ratio, the ratio between physical pixels and logical pixels used by cascading style sheets (CSS): other names for it are "CSS Pixel Ratio" and "dppx"

したがって、デバイスピクセル比は 1 つの CSS ピクセル（幅）がいくつかの物理ピクセル（幅）に相当するかを表します：

DPR = 物理ピクセル数 / 論理ピクセル数

例えば dpr=2 の場合、1 つの CSS ピクセルは 4 つの物理ピクセル点で構成されます。上記の CSS ピクセルの説明を参照してください

P.S. DPR は単位ではなく、属性名です。例えばブラウザでは window.devicePixelRatio で画面の DPR を取得します

特に注意：zxx の説明：

window.devicePixelRatio は设备上の物理ピクセルとデバイス独立ピクセル (device-independent pixels (dips)) の比率です。

数式で表すと：window.devicePixelRatio = 物理ピクセル / dips

ここでの「デバイス独立ピクセル」は論理ピクセル、つまり CSS ピクセルを指しており、これも属性名です。Android の単位 dip/dp と混同しないでください。両者には何の関係もありません。英語は同じで意味もほぼ同じですが、それは Android 固有の話であり、一般的ではありません

ピクセル密度

ピクセル密度は表示密度または画面密度とも呼ばれ、略称は DPI（Dots Per Inch）または PPI（Pixel Per Inch）で、意味は同じです

専門的には通常 PPI と言います。細かい違いは以下の通りです：

ppi と dpi（毎インチドット数）。技術的な観点から言えば、「ピクセル」（p）はコンピュータ表示領域にのみ存在し、「ドット」（d）は印刷またはプリント領域にのみ現れます。

同じサイズの画面でもピクセルサイズが異なることがよくあります。これは DPI の違いです。例えば 4.7 インチの iPhone6 のピクセルサイズは 750x1334px、4.7 インチの HTC One のピクセルサイズは 1080x1920px です

ピクセル密度は簡単に計算できます。例えば iPhone6 の場合：

// 画面対角線のピクセルサイズ / 物理サイズ（inch）
Math.sqrt(750*750 + 1334*1334) / 4.7 = 326ppi

生活事例：

Windows で解像度を変更するのは~~ピクセル密度~~（ピクセル密度は属性であり、画面の物理ピクセルサイズと物理サイズは固定されているため固定不変）デバイスピクセル比です。そのため、同じ画像でも異なる解像度のデバイスでは表示サイズが異なります。~~ピクセル~~デバイスピクセル比が低いほど、論理解像度が高くなります（dpr=1 の場合、論理解像度=物理解像度）。画像の表示サイズは小さくなります（定規で画面を測ってください）。例えば Windows の 1920x1080 解像度では、デスクトップアイコン/フォントは 1366x768 よりも小さくなります。画像閲覧ツールで画像を拡大できますが、実際にはソフトウェアの補間によってピクセルデータをシミュレートし、幅と高さのピクセル数を増やしているため、非常に大きく拡大すると鮮明ではなくなります（歪む）。縮小する場合も同様の問題があります

出力の最後の瞬間：例えば表示、またはプリント、または現像時の DPI 設定こそが、最終的な出力サイズを決定する鍵となる設定です。ボディがファイルを形成する際に示される 180DPI や 72DPI などは、設定された一時的なパラメータに過ぎません。そのため、写真洗浄には寸写真、2 寸写真などが存在します

カメラ内の EXIF に表示される DPI や photoshop に表示される DPI は、カメラと PS が最終的に使用するプリンタの DPI を知らず、ウェブ上に配置するだけのものかどうかも知らないため、最終的な出力対象を勝手に仮定した数値に過ぎず、実際には何の意味もありません

デバイス独立ピクセル

通常、Google が Android の大量の奇妙な画面を適応させるために提案したものを指します。Windows にもこの概念がありますが、意味は異なります。IOS にはデバイス独立ピクセルという说法はないようです

デバイス独立ピクセルを単位として使用するのは、通常 Android 開発におけるもので、略称は DIP（Device Independent Pixels）または DP（Density-independent Pixels）で、意味は完全に一致します

Android 機器の特徴は画面サイズが多様であることで、表示をできるだけデバイスと無関係にするために dip を提案しました。参照する density は 160 です。計算式は以下の通りです：

// 画面密度が 160（単位は ppi または dpi、同じ意味）の場合、px === dip
px = dip * density / 160 
// したがって
dip = px * 160 / dpi

もちろん、これら 2 つの式は Android デバイスにのみ適用され、この dip は他の場所に持って行っても意味がありません

ビューポート（viewport）

デスクトップではビューポート幅はブラウザ幅と等しいですが、携帯電話では異なります。

レイアウトビューポート

携帯電話ではデスクトップブラウザ向けに設計されたサイトを収容するため、デフォルトのレイアウトビューポート幅は画面幅よりもはるかに大きく、ユーザーにサイトの全体像を見てもらうためにサイトを縮小します
ビジュアルビューポート

画面の可視領域、つまり物理ピクセルサイズです
理想ビューポート

サイトが携帯電話向けに準備されている場合に使用します。meta で宣言します。初期の iPhone の理想ビューポートは 320x480px でした

したがって、ズームがない場合、画面の CSS ピクセル幅は実際には理想ビューポートの幅を指します。meta タグ：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

はレイアウトビューポート=理想ビューポートを指定し、ズームを禁止します。したがって width=device-width の viewport meta を追加するとページが大きくなります（最初はページコンテンツが小さすぎて読めません）。実際にはレイアウトビューポートが小さくなったのです