css – 在不同的浏览器/屏幕尺寸上显示两个对象相同的实际距离(例如英寸)

我正在浏览器中开发心理学实验.为了在人们之间保持相同的视角,我想在屏幕上以5英寸的距离显示两个字符.

有没有办法检测正在使用的显示器的实际大小,并使用屏幕分辨率和DPI,将两个对象分开相同的实际宽度？ (我只允许拥有真实计算机的人,例如不是移动计算机)

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

我正在使用HTML5 Canvas,fwiw.也许将此画布重新调整为分辨率和DPI可以解决问题.

解决方法

不,不幸的是.浏览器将始终报告96 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,v,v);
  ctx.fillText(v + " PPI",10,20);
  
  // draw marks which should be 4 inches apart
  ctx.fillRect(0,3,150);
  ctx.fillRect(96*4 * (v / 96),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>

该示例当然可以扩展为采用垂直参数以及考虑像素纵横比(即视网膜显示)和比例.

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

原文地址：https://www.jb51.cc/css/217234.html