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

.html

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./xgqfrms/p/14196834.html

https://en.wikipedia/wiki/Dots_per_inch

https://en.wikipedia/wiki/Display_resolution

• javascript
• screen
• screen-resolution
• screen-size
• retina

Share Improve this question Follow edited Jul 5, 2022 at 3:54 xgqfrms asked Dec 27, 2020 at 3:29 xgqfrmsxgqfrms 12.3k11 gold badge8080 silver badges7373 bronze badges 3

• What are the display preferences ? Do you have retina scaling on ? – Richard Commented Dec 27, 2020 at 3:49
• @Richard yeah, MBP 2018 retina, but using the default for display. – xgqfrms Commented Dec 27, 2020 at 4:01
• solution: screen.width * window.devicePixelRatio & screen.height * window.devicePixelRatio, get the real screen resolution – xgqfrms Commented Dec 29, 2020 at 2:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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