css - Display two object same real distance (e.g. inches) apart across different browers / screen sizes

Question

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.

Answer 1

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