Detect Screen Resolution Independently Of Page Zoom Level And Windows Scale Settings

I need to detect screen resolution. The problem is, if scale setting in Windows 10 is not 100%, it affects screen.width / screen.height values. I could use pixelDeviceRatio for cor

Solution 1:

This is an XY problem, OP doesn't want the screen resolution, but the one of the document.

---

Note for future readers. There are chances that if you also are trying to get the actual screen resolution, you are yourself in some kind of an XY problem.

If what you want is sharp pixels, getting the actual screen resolution won't help you much.

Taking OP's example of a browser zoom of 75% itself scaled by the OS zoom at 150%, we get for a single white pixel,

• 1 white pixel x 0.75 => impossible to render. => anti-aliasing with surrounding pixels. So if we say that surrounding pixels were black, then we've now got a grayish pixel.

And this was only at the browser level... We still have to pass the OS zoom algorithm.

• 1 grayish pixel x 1.5 => impossible to render => anti-aliasing with surrounding pixels. And yet a new pixel, even farther from our original white.

---

The best we can do here is to set our canvas bitmap's size to the one reported by the browser. This way, only the OS zoom would kick in.

Note: You may want to try to detect high density screens a.k.a retina®, which are actually able to render pixels at sub-px level, in this case, you might try using window.devicePixelRatio as a general scaling factor, but remember to round it, since a floating scale would mean more antialiasing (no high density screen will ever use 2.3 pixels to render one px).

So to detect this document size, is an easy task, with multiple different ways of doing:

If you deal with hard-coded sizes in windowed mode, you can simply check for window.innerWidth and window.innerHeight when entering fullScreen:

_{Unfortunately, StackSnippets® iframe do not allow fullscreen mode...}

// listen for the resize eventwindow.onresize = function() {
  // if we are in fullscreen modeif (document.fullscreenElement === canvas) {
    // simply size our canvas to the reported innerWidth/innerHeight.
    W = canvas.width = window.innerWidth;
    H = canvas.height = window.innerHeight;
  }
  draw();
}
// in the fulscreenchange eventdocument.onfullscreenchange = function() {
    // if we are exiting the fullscreen modeif (!document.fullscreenElement) {
      // set  back to hard-coded values
      W = canvas.width = 500
      H = canvas.height = 200;
    }
    draw();
  }

Fiddle.

If you want something more dynamic, you could also make use of CSS to let you know the actual size. Indeed, you can resize your canvas through CSS, as long as you remember to set its bitmap's size to the displayed size.

// listen only for the resize eventwindow.onresize = function() {
  // set the canvas size to its own rendered size
  W = canvas.width = canvas.offsetWidth;
  H = canvas.height = canvas.offsetHeight;
  draw();
}

/* target only when in fullscreen mode */canvas::fullscreen {
  width: 100vw;
  height: 100vh;
}
/* windowed mode */canvas {
  width: 50vw;
  height: 50vh;
}

Fiddle.

Solution 2:

You can try this:

var width = screen.widthvar height = screen.height
width = width*window.devicePixelRatio;
height = height*window.devicePixelRatio;

alert("width : "+width);
alert("height : "+height);

Solution 3:

Currently there is no JavaScript api to detect os scale factor.