Section 01 · ピクセル計算式
物理PPIとCSSピクセルの違いは何ですか?
物理PPIはパネル固有値 (√(W² + H²) / diagonalInches) ですが、CSSピクセルはW3C規定の論理単位 (1/96 CSSインチ = 3.7795 px/mm) です。HiDPI環境では devicePixelRatio が掛かるため、本ツールは pxPerMm とズーム不変の物理密度 devicePxPerMm = pxPerMm × dpr を管理します。
技術リファレンス · ディスプレイ光学 & W3C CSS単位 · 2026年11月更新
抽象的なW3C 96-PPI CSSピクセルと、実機パネルの物理ミリメートル画素ピッチのギャップを理論と実務から解説します。
Section 01 · ピクセル計算式
物理PPIはパネル固有値 (√(W² + H²) / diagonalInches) ですが、CSSピクセルはW3C規定の論理単位 (1/96 CSSインチ = 3.7795 px/mm) です。HiDPI環境では devicePixelRatio が掛かるため、本ツールは pxPerMm とズーム不変の物理密度 devicePxPerMm = pxPerMm × dpr を管理します。
Section 02 · 物理標準規格
世界中のクレジットカードや身分証はISO/IEC 7810:2019 ID-1規格により厳密に 85.60 × 53.98 mm に統一されています。画面枠と一致させることで pxPerMm = cardWidthPx / 85.60 がOS倍率やEDID誤差を回避して直接求まります。
Section 04 · 補助確認基準品
USペニー 19.05 mm (3/4″)、1ユーロ硬貨 23.25 mm、USクォーター 24.26 mm、単3電池 50.50 mm、ISO A4短辺 210.0 mm、1円玉 20.00 mmなどでいつでも検算できます。
Section 05 · ズーム・マルチモニター保持
較正値 devicePxPerMm をディスプレイ解像度署名ごとに localStorage へ保存し、ズーム変化時は自動追従、別モニター移動時は通知バナーで知らせます。
Section 06 · 計算実例 & HiDPIマトリクス
100%ズーム時のCSS解像度にピタゴラス対角式を適用すると CSS px/mm が得られ、window.devicePixelRatio を掛けると不変の devicePxPerMm になります。
| ディスプレイ構成 | CSS解像度 | 実効CSS PPI | CSS px/mm | devicePxPerMm |
|---|---|---|---|---|
| 14.2" MacBook Pro (Retina / 2× DPR) | 1512 × 982 CSS px (DPR 2.0) | 127.0 CSS PPI | 5.000 CSS px/mm | 10.000 device px/mm |
| 15.6" Windowsノート (125%拡大) | 1536 × 864 CSS px (DPR 1.25) | 113.0 CSS PPI | 4.448 CSS px/mm | 5.560 device px/mm |
| 24" 1080p モニター (100%) | 1920 × 1080 CSS px (DPR 1.0) | 91.8 CSS PPI | 3.614 CSS px/mm | 3.614 device px/mm |
| 27" 4K UHD モニター (150%拡大) | 2560 × 1440 CSS px (DPR 1.5) | 108.8 CSS PPI | 4.283 CSS px/mm | 6.425 device px/mm |
| 6.1" OLED スマホ (3× DPR) | 390 × 844 CSS px (DPR 3.0) | 152.4 CSS PPI | 6.000 CSS px/mm | 18.000 device px/mm |
OSスケーリングの注意点
Windowsの125%/150%拡大やmacOSのスケーリング解像度下では仮想フレームバッファが介在するため、公称対角インチ値とズレる場合があります。実物85.60 mmカードによる直接合わせが最も確実です。
スマホ狭幅対応
スマホ縦持ち幅は約58〜72 mmしかなく横カード(85.60 mm)がはみ出します。縦向きカードモードで短辺 53.98 mm に合わせることで高精度に較正できます。
Windows 125%/150% & Android Chrome
125%や150%のClearType拡大を使うWindows 10/11ノートPCやAndroid Chrome(幅約360〜412 CSS px)では、ブラウザ倍率を100%に保ち、Androidでは縦向きカードモード(53.98 mm)を選んで実物カードと合わせてください。
Section 07 · 表示物理と誤差限界
保護ガラス厚 (0.5〜1.5 mm) と屈折率 (n ≈ 1.5) により、30°斜めから見ると約0.3〜0.5 mmの視差ズレが生じます。
目盛りとガイド線の直上90°から読み取ることで再現性を最大化できます。±0.25 mm以下の厳密公差には校正済みノギスをお使いください。
較正完了後、以下の規格品を画面に軽く当てて一致を確かめられます:
| 基準物品 | ミリ (mm) | インチ (in) | 準拠規格 |
|---|---|---|---|
| ISO/IEC 7810 ID-1 カード (幅) | 85.60 mm | 3.370 in | ISO/IEC 7810:2019 ID-1 |
| ISO/IEC 7810 ID-1 カード (高さ) | 53.98 mm | 2.125 in | ISO/IEC 7810:2019 ID-1 |
| US 1セント硬貨 (直径) | 19.05 mm | 0.750 in (3/4″) | 米国造幣局規格 |
| US 5セント硬貨 (直径) | 21.21 mm | 0.835 in | 米国造幣局規格 |
| 1ユーロ硬貨 (直径) | 23.25 mm | 0.915 in | 欧州中央銀行 |
| US 25セント硬貨 (直径) | 24.26 mm | 0.955 in | 米国造幣局規格 |
| 2ユーロ硬貨 (直径) | 25.75 mm | 1.014 in | 欧州中央銀行 |
| 単3乾電池 (全長) | 50.50 mm | 1.988 in | IEC R6 / ANSI 15 |
| 米ドル紙幣 (幅) | 155.96 mm | 6.140 in | 米国製版印刷局 |
| ISO 216 A4用紙 (短辺) | 210.00 mm | 8.268 in | ISO 216 用紙規格 |
校正ブループリント
96 PPI 既定値がモニター間でずれる理由と、1枚のカードで正確になる仕組みを図解します。
インタラクティブ動作ガイド
ISO/IEC 7810 ID-1 カードを左上基準 (0, 0) に合わせ、右端ハンドルを実寸枠に揃えます。
85.60 × 53.98 mm1 cm の主目盛りが 5 mm の半目盛りと 1 mm の細目盛りへ段階的に展開されます。
1 cm = 10 mm