如何使用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