在不同的浏览器/屏幕尺寸上显示两个相同的实际距离（例如英寸）答案

【问题标题】：Display two object same real distance (e.g. inches) apart across different browers / screen sizes在不同的浏览器/屏幕尺寸上显示两个相同的实际距离（例如英寸）
【发布时间】：2015-06-29 12:05:46
【问题描述】：

我正在浏览器中开发一个心理学实验。为了让人们保持相同的视角，我想在屏幕上显示两个相距约 5 英寸的字符。

有什么方法可以检测正在使用的显示器的实际尺寸，并使用屏幕分辨率和 DPI，将两个对象渲染成相同的 real 宽度？（我只允许拥有真实计算机的人，例如非移动设备）

我听说检测真实尺寸可能是不可能的，如果是真的，假设人们会向我报告他们显示器的真实尺寸，这可能吗？

我正在使用 HTML5 画布，fwiw。也许根据分辨率和 DPI 调整此画布的大小是一种解决方案。

【问题讨论】：

标签： css html canvas

【解决方案1】：

不，很遗憾。浏览器将始终报告 96 DPI。如果没有实际的 DPI，您将无法以像素以外的其他单位生成精确的度量值。

即使可以，浏览器也只会反映系统 DPI，而系统 DPI 本身只是一个近似值。

您需要为提供这样做机制的单个设备“校准”，例如可以在屏幕上变化和测量的刻度。当它测量 1 英寸时，您知道有多少像素覆盖了该英寸，然后这个值可以用作其余部分的比例。

如何通过“校准”获取屏幕 DPI 的示例

var ctx = document.querySelector("canvas").getContext("2d"),
    rng = document.querySelector("input");

ctx.translate(0.5, 0.5);
ctx.font = "16px sans-serif";
ctx.fillStyle = "#c00";
render(+rng.value);

rng.onchange = rng.oninput = function() {render(+this.value)}; // update on change

function render(v) {
  ctx.clearRect(-0.5, -0.5, 600, 300);
  ctx.strokeRect(0, 0, v, v);
  ctx.fillText(v + " PPI", 10, 20);
  
  // draw marks which should be 4 inches apart
  ctx.fillRect(0, 0, 3, 150);
  ctx.fillRect(96*4 * (v / 96), 0, 3, 150);      // assuming 96 DPI base resolution
  ctx.fillText("------  Should be 4 inches apart ------", 50, 140);
}

<label>Adjust so square below equals 1 inch:
<input type=range value=96 min=72 max=145></label>
<canvas width=600 height=300></canvas>

这个例子当然可以扩展为采用垂直参数以及考虑像素纵横比（即视网膜显示器）和比例。

然后您需要使用 base 比例（例如 96 DPI）构建所有对象和图形。然后使用实际 DPI 和 96 DPI 之间的关系作为所有位置和大小的比例因子。

【讨论】：