如何使用js获取真实的屏幕尺寸（屏幕分辨率）

Question

我只是想知道是否有办法在 js 中获取屏幕实际尺寸（屏幕分辨率）。

1. 我知道screen API，但它的结果不是我想要的。

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

screen.width;
// 1680

screen.height;
// 1050

其中，我得到了width: 1680, height: 1050 ；

实际上，屏幕尺寸是2880 x 1800 ；

我的截图

那么，有人可以帮忙吗？

---

Apple Retina Screen错误原因更新⚠️

Apple Retina 屏幕default自动缩放为1680px x 1050px

由于您无法获得真正的视网膜屏幕尺寸比例，因此结果不会是2880px x 1800px ；

但是下面的解决方案也是正确的，因为它读取的屏幕尺寸是1680px x 1050px ，所以结果是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)

参考文献

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

屏幕分辨率≠Window宽度
大多数操作系统更改屏幕 dpi 所以 screen.width 主要返回屏幕大小与 os dpi 例如我的屏幕分辨率是 1920x1080 和 windows 默认 dpi 是 125 所以 js screen.width 返回 1600px

用这个：

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