在不同的浏览器/屏幕尺寸之间显示两个物体相同的实际距离（例如英寸） [英] Display two object same real distance (e.g. inches) apart across different browers / screen sizes

问题描述

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

有任何方法来检测正在使用的监视器的实际大小，并使用屏幕分辨率和DPI，渲染两个对象相同 real width？ （我只允许拥有真实电脑的人，例如不是手机）

我听说检测到真实大小可能不可能，如果是真的，假设人们会向我报告他们的监视器的实际大小，这是可能吗？

我使用HTML5 Canvas，fwiw。也许是调整这个画布w.r.t到分辨率和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 = function render（+ this.value）}; // update on changefunction render（v）{ctx.clearRect（-0.5，-0.5，600，300）; ctx.strokeRect（0，0，v，v）; ctx.fillText（v +PPI，10，20）; //绘制标记，距离应为4英寸ctx.fillRect（0，0，3，150）; ctx.fillRect（96 * 4 *（v / 96），0,3,150）; //假设96 DPI基本分辨率ctx.fillText（------应该相距4英寸------，50，140）;}  

 < label>调整为小于等于1英寸：< input type = range value = 96 min = 72 max = 145>< / label>< canvas width = 600 height = 300>< / canvas>  

b
$ b

这个例子当然可以扩展到考虑垂直参数以及考虑像素宽高比（即视网膜显示）和缩放。

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

I'm developing a psychology experiment in the browser. In order to keep the same viewing angle across people, I want to display two characters around 5 inches apart on the screen.

Is there any way to detect the real size of the monitor being used, and using the screen resolution and DPI, render the two objects the same real width apart? (I will only allow people that have real computers, e.g. not mobile)

I heard detecting real size may not be possible, if true, and assuming people will report to me the real size of their monitor, is this possible?

I'm using HTML5 Canvas, fwiw. Perhaps resizing this canvas w.r.t to the resolution and DPI is a solution.

解决方案

No, unfortunately. The browser will always report 96 DPI. Without actual DPI you cannot produce exact measures in other units than pixels.

Even if you could the browser would only reflect the system DPI which in itself is just an approximation.

You need to "calibrate" for the individual device providing a mechanism to do so, e.g. a scale that can be varied and measure on screen. When it measures 1 inch you know how many pixels covers that inch, and then this value can be used as a scale for the rest.

Example on how to get screen DPI via "calibration"

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 = 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>

This example can of course be extended to take a vertical parameter as well as considering pixel aspect ratio (ie. retina displays) and scale.

You need to then build all your objects and graphics using a base scale, for example 96 DPI. Then use the relationship between the actual DPI and 96 DPI as a scale factor for all positions and sizes.

这篇关于在不同的浏览器/屏幕尺寸之间显示两个物体相同的实际距离（例如英寸）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！