Window.devicePixelRatio 设备像素比

定义

设备像素比返回了设备上的物理像素和当前设备CSS像素的一个比值。 这个数值告诉浏览器多少屏幕实际的像素点被用来画了一个CSS像素点。
公式表示就是：window.devicePixelRatio = 物理像素 / css像素
这个比例常被用来解决标准显示及Retina显示的不同。

注意

没有办法可以得知这个比值的变化（这可能发生，比如用户将一个窗口拖到另一个显示器中）。 唯一的解决办法就是周期性的检查这个比值以确保显示的正确。

格式

var value = window.devicePixelRatio;

value = 1表示传统96DPI显示，value = 2表示HiDPI/Retina 显示。

例子 – 修正canvas分辨率

const pxRatio = Math.max(Math.floor(window.devicePixelRatio) || 1, 2);
canvas.width = canvas.clientWidth * pxRatio;
canvas.height = canvas.clientHeight * pxRatio;

参考资料

1. https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
2. https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/