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

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>

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.