CSSでの絶対単位（cm, inなど）

Question

CSSで1cmや1inといった指定ができますが、
それをした後に実際に定規で測ってみると、1cmじゃなかったり1inchじゃなかったりします。

どうやらWindowsパソコンのブラウザの解像度は96dpiという風に固定されている（？）ようで、
それにdevicePixelRatioなどの情報も得られることは分かったのですが、
それらの値を組み合わせても実際の解像度の計算になりません。

そもそも、パソコンのブラウザの解像度は96dpiとなっている意味もよく分からないのですが、（パソコンによって違うと思うので）
物理的に「1cm」を表示するには、どのようにすればいいでしょうか。

よろしくお願いします。

Answer 1

物理的に「1cm」を表示するには、どのようにすればいいでしょうか。

おそらく、画面自体を物理的に測定してその値に合わせて表示寸法を調節するなど、相当に特殊な方法が必要になります。

ディスプレイで表示する場合、CSSの「1cm」や「1in」も、ピクセルに対する倍率で換算されるだけなので、実際の寸法とは一致しません（W3C）。

本来は物理的な長さと対応させる予定だったのですが、「96px=1in」の基準を前提に作られたドキュメントが多すぎて、1inを本当に1inで表示させてはレイアウトが崩壊するため、規格のほうが折れた格好です。

Comments

[atemu]

ひえ～なるほどです。
ということは、実際の1cmなどで表示する場合には、ネイティブアプリなどにしなければならないということであっていますでしょうか？

[maisumakun]

ネイティブでも、1ピクセルがどのくらいのサイズかは、特にパソコンだとデバイスで知ることができない場合がある（ディスプレイも交換可能どころか、プロジェクターに写せばスクリーンの配置だけで実寸が変化してしまう）ので、「寸法を測っての合わせ込み」が必要になると思います。

iOSなら、端末が少ないので実寸調整もあらかじめデータを作っておくことができるかもしれません。

Answer 2

ディスプレイの物理的なサイズが違う（例えばスマホとPCでも違いますよね）ので、特定の端末でしか実現できませんが、画面の最大横ピクセルと実測の画面幅の比率で1cmが何pxかは出せます。