質問: ### 質問 約80インチのディスプレイに、誤差1インチの範囲で、約10インチの矩形を表示したいです。 「原寸大表示したい」と客から要望を受けました。 ディスプレイのどういった情報を用いて、どのようにして表示すれば、よいでしょうか? ### 調べたこと #### CSS 絶対単位 CSSの絶対単位(cm, in)を使って矩形を表示したところ、1cm(13インチディスプレイに10cmの矩形表示)ずれていました。 下記のように記載されていたので、絶対単位を使うだけではダメなのでしょう。 > > > こうした定義の結果、低 dpi のデバイスでは inches (in)、centimeters (cm)、millimeters (mm) といった単位で表現される length が、同名の物理的な単位と同じ長さになるとは限りません。 > > > MDN length #### ディスプレイごとのパラメタ 「原寸大表示する」下記サイトでは、最初にディスプレイを選択します。 したがって、「表示するディスプレイごとに、パラメタを変える必要がある」と考えましたが、具体的にどのような情報が必要なのかは分かりません。 ### 自分の想像 * 以下のように書かれているので、センチメートルよりはインチを使った方がよい? > > > 低 dpi のデバイスでは、単位 px は physical reference pixel を表し、その他の単位はこれを基準に決められます。例えば 1in は 96px と定義され、これは 72pt と等しくなります > > > MDN length ### 補足 * 原寸大表示したいモニタは1種類 * Firefoxのみサポート
回答: CSSで指定した矩形を80インチのディスプレイで表示して、表示された矩形を実際に定規等で測ったときに10インチの大きさにしたいということですよね? ディスプレイの実際の表示領域と画面解像度をもとに、何pxで指定すればよいか求められます。 実際に表示するディスプレイの仕様がわかりませんので、仮にNECのLCD-P801のディスプレイで表示すると仮定します。 このディスプレイの仕様は下記です。 | 有効表示領域 | 表示画素数 | | --- | --- | | 177.12cm × 99.63cm | 1,920×1,080 | `mm`より`cm`の方がわかりやすいかと思い、勝手に`cm`にしました。 ディスプレイが色を表す最小の単位は、1物理ピクセルです。 1物理ピクセルの大きさはディスプレイごとに異なります。 このディスプレイの場合は、横に1920個の物理ピクセルがあります。 このディスプレイの場合なら `177.12cm` の大きさに 1920個の物理ピクセルが敷き詰められています。 1物理ピクセルの大きさは、`177.12cm / 1920` で求められ、`0.09225cm`です。 CSSで`1px`と指定すると`0.09225cm`で表示されます。 1インチは `2.54cm` なので、10インチは `25.4cm` です。 実際に表示したい `25.4cm` を1物理ピクセル(`0.09225cm`)で割れば、何pxで指定すればよいか求められます。 `275.338...px`で指定すると約10インチ(`25.4cm`)で表示されます。 ディスプレイによって異なるので、px数を求めたいなら、このような感じで計算してください。 ※画面解像度はパソコンの設定で変更できるので、実際に表示するディスプレイが縦横何pxの画面解像度に設定しているか確認する必要があります。 関係ない説明もありますが、参考にどうぞ。 * Qiita - 【単位超入門】ピクセル、ドット、PPI、DPI、解像度、メートル、インチ、ポイント