一、概述

window接口的devicePixelRatio返回當(dāng)前顯示設(shè)備的物理像素分辨率與CSS像素分辨率之比。 此值也可以解釋為像素大小的比率：一個CSS像素的大小與一個物理像素的大小。 簡單來說，它告訴瀏覽器應(yīng)使用多少屏幕實際像素來繪制單個CSS像素。

二、值

一個雙精度浮點值，指示顯示器的物理像素分辨率與CSS像素分辨率之比。 值1表示經(jīng)典96 DPI（在某些平臺上為76 DPI）顯示，而對于HiDPI / Retina顯示屏則期望值為2。 在異常低分辨率的顯示器中，或更常見的是，當(dāng)屏幕的像素深度比簡單地將96或76 DPI的標(biāo)準(zhǔn)分辨率提高一倍時，可能還會返回其他值。

三、監(jiān)視屏幕分辨率或縮放級別的更改

let pixelRatioBox = document.querySelector(".pixel-ratio");
let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;

const updatePixelRatio = () => {
  let pr = window.devicePixelRatio;
  let prString = (pr * 100).toFixed(0);
  pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`;
}

updatePixelRatio();

matchMedia(mqString).addListener(updatePixelRatio);

四、參考

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio

https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/