devicePixelRatio 那些事儿

最新推荐文章于 2024-02-23 18:18:23 发布

转载最新推荐文章于 2024-02-23 18:18:23 发布 · 738 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000009511784

本文介绍了设备像素比的概念及其在不同设备上的应用，解释了如何通过调整设备像素比来解决高清屏幕下浏览器内容显示过小的问题，并提供了一个获取设备像素比的示例代码。同时，还探讨了Canvas在高清屏下的模糊问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

devicePixelRatio 那些事儿

设备像素比

window.devicePixelRatio 是设备上物理像素和设备独立像素的比例，即公式表示为：window.devicePixelRatio = 物理像素 / dips。
物理像素（physical pixel）：设备能控制显示的最小单位
设备独立像素（device-independent pixel）：独立于设备的用于逻辑上衡量像素的单位
每英寸像素量（pixels per inch）：一英寸长度上可以并排的像素数量

正常人眼可以识别的分辨率为 300PPI，而现在很多设备的分辨率都超过 300PPI，如果设备总是以满分辨率来显示东西就可能造成文字太小无法看清，因此像浏览器这样的软件就会对内容做一次放大后再进行渲染（也就是降低分辨率）：要降低分辨率就需要让像素这个单位变大，因此 PPI 的计算不再使用物理像素，而改用设备独立像素，那么设备独立像素和物理像素之间就存在一个比例差异，这就是 设备像素比。

单位 dppx（dots per pixel）表示每个 dip 占用几个物理像素，或者说 css 中的单位 px 在屏幕上占用多少物理像素，在 PC 浏览器上这个值通常为1（浏览器提供的缩放功能实际上就是修改设备像素比来实现的）。

我们可以使用以下代码获取 devicePixelRatio 值：

function getPixelRatio(context) {
    const backingStore = context.backingStorePixelRatio ||
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio || 1;
    return (window.devicePixelRatio || 1) / backingStore;
}

High DPI Canvas

Canvas 在高清屏下绘制图片模糊的解决方案

问题分析

可知 Canvas 不是矢量图而像图片一样是位图模式的，如果不做高清屏适配的话浏览器就会以多个像素点的宽度来渲染一个像素，相当于图片被放大多倍而因此变模糊。

解决方案

即将 canvas 的高和宽分别乘以 ratio 将其放大，然后再用 css 将其样式高和宽限制成初始的大小。