約80インチのディスプレイに、誤差1インチの範囲で原寸大表示する方法

質問

約80インチのディスプレイに、誤差1インチの範囲で、約10インチの矩形を表示したいです。
「原寸大表示したい」と客から要望を受けました。

ディスプレイのどういった情報を用いて、どのようにして表示すれば、よいでしょうか？

調べたこと

CSS 絶対単位

CSSの絶対単位(cm, in)を使って矩形を表示したところ、1cm(13インチディスプレイに10cmの矩形表示)ずれていました。
下記のように記載されていたので、絶対単位を使うだけではダメなのでしょう。

こうした定義の結果、低 dpi のデバイスでは inches (in)、centimeters (cm)、millimeters (mm) といった単位で表現される length が、同名の物理的な単位と同じ長さになるとは限りません。

MDN length

ディスプレイごとのパラメタ

「原寸大表示する」下記サイトでは、最初にディスプレイを選択します。
http://realscale.net/
したがって、「表示するディスプレイごとに、パラメタを変える必要がある」と考えましたが、具体的にどのような情報が必要なのかは分かりません。

自分の想像

以下のように書かれているので、センチメートルよりはインチを使った方がよい？

低 dpi のデバイスでは、単位 px は physical reference pixel を表し、その他の単位はこれを基準に決められます。例えば 1in は 96px と定義され、これは 72pt と等しくなります

MDN length

補足

原寸大表示したいモニタは１種類
Firefoxのみサポート

行動規範の内容に同意します

回答3件

ベストアンサー

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、解像度、メートル、インチ、ポイント

投稿2017/06/14 06:51

編集2017/06/14 07:00

7968

総合スコア253

yuji38kwmt

2017/07/03 14:57

ありがとうございます！

行動規範の内容に同意します

pixel per mmを算出してみました。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4		<script>
5		    var display_inch = 27;
6		    var dh = window.screen.height;
7		    var dw = window.screen.width;
8		    var ppi = Math.sqrt(dh*dh + dw*dw) / display_inch;
9		    var ppm = ppi / 25.4;
10		    
11		    window.onload = function(){
12			    var squre = document.getElementById('id');
13			    squre.style.width = 100*ppm + "px";
14			    squre.style.height = 100*ppm + "px";
15		    }
16		</script>
17</head>
18<body>
19		<div id="id" style="background:red;"></div>
20</body>
21</html>