px ≠ ピクセル

デバイスピクセル ≠ ブラウザpx ≠ 画像px

Appleのおかげで、CSSとHTMLのピクセル（px）はほとんど常に複数のデバイス/プリンターピクセルにマップされます。私の電話のdevicePixelRatioは3.875です。あなたのはどうですか？

私のデスクトップのdevicePixelRatioはブラウザのズームで変わりますが、デフォルトでは1.5です（システム > ディスプレイ > スケールが150%ですから）。

画像ファイル（SVGを除く）はピクセルのグリッドにデコードされます。画像ピクセルを1:1の比率でデバイスピクセルと完全に表示するのは厄介なほど難しいですが、srcsetを使えば十分近づくことができます。もしその完璧なマッピングが本当に必要な正当な理由がある場合には、少しのJavaScriptによって読み込み後にHTML要素のサイズを調整することもできますが、そのような禁断の技術はここでは明かされません。

その他の絶対 単位 (in, pc, pt, mm, cm, Q) は、CSSピクセルの数で定義され、すべてが96dpiであるふりをしています。開発者は、一般的にフォントサイズやビューポート/コンテナの寸法から導かれる単位を使用した方が良いので、絶対単位は避けます。単位が一致しないと、ユーザーがアクセシビリティ > テキストサイズの倍率を調整したり、ブラウザをズームしたり、デバイスを回転させたりするとレイアウトが崩れる可能性があります。言うまでもなく、サイトを出荷する前にこれらすべてのことを行うべきです。