Detect screen resolution independently of page zoom level and Windows scale settings

Question

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 correct them, but here is another problem: if the page is zoomed, it also affects pixelDeviceRatio .

For example, I have Windows scale setting is 150%, and page zoom is 67%. My screen resolution is 1920x1080. In this case, screen.width is 1280, and pixelDeviceRatio is 1.0 (because Windows scale and page zoom level compensate each other). How can I detect the real screen resolution?

Upd.: I'm working on HTML5 game. I need to resize it to actual screen resolution when going to fullscreen mode.

Upd. 2: I have <canvas> element and call its requestFullscreen method to switch into fullscreen mode. Then I have to set width and height of the canvas. If I set it, for example, less than actual screen resolution (1280 instead of 1920), empty margins around the canvas appears.

Answer 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 aka 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 event
window.onresize = function() {
  // if we are in fullscreen mode
  if (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 event
document.onfullscreenchange = function() {
    // if we are exiting the fullscreen mode
    if (!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 event
window.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 .

Answer 2

currently there is no javascript api to detect os scale factor. Because i have also looked for it too many time and couldn't find it.

Answer 3

You can try this:

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

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

Hope my answer helps!