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

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

获取用户屏幕的真实像素分辨率, 屏幕实际尺寸

window.devicePixelRatio

设备像素比

screen resolution

屏幕分辨率

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}
  `);
}

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

retina screen bug ❌

视网膜屏幕错误

(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 ( 2.5K Retina Screen)
// Your screen resolution is: 1920 x 1080 ( 1080P / FHD)

Built-in Retina Display: 15.4-inch (2880 × 1800) ❌