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