一、概述

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

二、值

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

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

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/