How to get the real screen size(screen resolution) by using js

Question

I just wonder whether there exists a way to get screen real size(screen resolution) in js.

1. I know the screen API, but its result not what I wanted.

screen;
// Screen {availWidth: 1680, availHeight: 973, width: 1680, height: 1050, colorDepth: 30, …}

screen.width;
// 1680

screen.height;
// 1050

which, I got width: 1680, height: 1050;

actually, the screen size is 2880 x 1800;

my screenshots

So, anyone can help?

---

update for Apple Retina Screen Bug Reason ⚠️

Apple Retina Screen default auto scale to 1680px x 1050px

As you can't get the real retina screen size scale ratio, so the result will not be 2880px x 1800px;

But the below solution is also right, as it read screen size is 1680px x 1050px, thefore result is 3360px x 2100px;

(function getResolution() {
  const realWidth = window.screen.width * window.devicePixelRatio;
  const realHeight = window.screen.height * window.devicePixelRatio;
  console.log(`
    Your screen resolution is: ${realWidth} x ${realHeight}
    Your screen devicePixelRatio is: ${window.devicePixelRatio}
    Your screen width is: ${window.screen.width}
    Your screen height is: ${window.screen.height}
  `);
})();
// Your screen resolution is: 3840 x 2160 (4K)
// Your screen resolution is:  3360 x 2100 ( 3K? Retina Screen)
// Your screen resolution is: 1920 x 1080 ( 1080P / FHD)

refs

https://www.cnblogs.com/xgqfrms/p/14196834.html

https://en.wikipedia.org/wiki/Dots_per_inch

https://en.wikipedia.org/wiki/Display_resolution

Answer 1

Screen Resolution ≠ Window width
most os changing screen dpi so screen.width mostly return screen size with os dpi for for example my screen resolution is 1920x1080 and windows defult dpi is 125 so js screen.width return 1600px

use this:

function getResolution() {
  const realWidth = window.screen.width * window.devicePixelRatio;
  const realHeight = window.screen.height * window.devicePixelRatio;
  console.log(`Your screen resolution is: ${realWidth} x ${realHeight}`);
}

// test
getResolution();
// Your screen resolution is: 3840 x 2160