我正在浏览器中开发心理学实验.为了在人们之间保持相同的视角,我想在屏幕上以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之间的关系作为所有位置和大小的比例因子.
