理解设备像素比

最新推荐文章于 2024-05-10 14:01:58 发布

YaoDeBiAn

最新推荐文章于 2024-05-10 14:01:58 发布

阅读量3.1k

点赞数

分类专栏： css笔记

原文链接：https://www.jianshu.com/p/c88e9489b583

版权

css笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

移动端的设备多种多样，不同的设备又有不同的分辨率，低一点的有 800 * 400，中等的有 1280 * 720，高的有 1920 * 1080，甚至还有更高的 4k 屏等。
我们在开发移动端页面时，将视口（viewport）设置为设备宽度（device-width）后，同一份页面在这些不同的设备上又怎样的表现呢？我们写一个测试页面，在 Chrome 中看看就知道了。

同一份页面在不同设备上的表现

测试页面的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background:red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

1.PC 浏览器下的表现
PC 浏览器中的表现如下：

1-chrome.png

2.IPhone6 下的表现
IPhone6 下的表现如下：

2-iphone6.png

3.Galaxy S5 下的表现：
Galaxy S5 下的表现如下：

3-galaxy-s5.png

可见，虽然设备不一样，但同样一个元素，在这些设备上宽度都是一样的。
我们来看一下这些测试设备的分辨率：

Chrome（也就是我们的 PC 屏幕）：1920*1080
IPhone6：1334*750
Galaxy S5：1280*720

为什么这些设备拥有不同的分辨率，而在渲染页面时表现都一样呢？其实这是由设备像素比造成的。
设备像素比是怎么发挥作用的呢？要理解这个问题，需要三块预备知识：

设备独立像素
DPI/PPI
CSS 中的像素

下面依次来看一下这些内容。

设备独立像素

设备的独立像素是和设备的分辨率相关联的，比如 IPhone6 的分辨率为 1334 * 750，那么表示该手机的屏幕上有 1366 * 750 个物理像素，而 Galaxy S5 的屏幕上有 1280*720 个像素。

PPI/DPI

PPI/DPI 是像素密集度，表示屏幕每英寸拥有的像素个数，PPI/DPI 的计算方式如下（以 IPhone6 为例）：

image.png

最终计算出的 IPhone6 的 PPI 为：325.16。该结果表示在 IPhone6 上，每英寸有 325.16 个物理像素，四舍五入为 325 个物理像素。
可以发现：这个 PPI 的值近似等于 IPhone6 这个设备的水平物理像素的一半，也即：

750 / 325 = 2

这个由设备水平物理像素和设备 PPI/DPI 计算出来出来的比值就是设备像素比。

CSS 中的像素

CSS 中的像素是一个相对值，不是绝对值，因此1px 的 CSS 像素并不一定等于 1px 的物理像素。
需要注意的是，CSS 中的像素单位是抽象的，只是一种规范，最终的显示是取决于物理设备的。物理设备根据某种规则，决定该采用几个物理像素去显示 1px 的 CSS 像素，这个规则就是设备像素比。

设备像素比

前面已经说到过，设备像素比等于设备的水平物理像素和设备 PPI 的比值。设备像素比的意义就是决定了用多少个物理像素去显示 1px 的 CSS 像素。比如在 IPhone6 中，设备像素比为 2，那么在 IPhone6 上就会使用 2*2 = 4 个物理像素去显示 1px 的 CSS 像素。
因此，如果我们给一个 DIV 元素设置 300px * 300px 的样式，那么其在 IPhone6 上将会占用 600 * 600 个物理像素。这就是为什么明明 IPhone6 的分辨率为 1334 * 750（物理像素），而将 DIV 元素的宽度设置成 300px 后，其几乎占满了水平屏幕的原因。
上例在 IPhone 中的渲染效果也可以理解为：在分辨率为 667 * 325（设备宽度不变），设备像素比为 1 的设备上显示 300px 宽度的 DIV 的效果。既然设备像素比为 1，那么也可以这么理解：上例在 IPhone6 中的显示效果相当于在 667 * 325 的 Chrome 浏览器下的显示效果。
Galaxy S5 的设备像素比为 3，因此在 Galaxy S5 中的显示效果可以理解为在 660 * 360 的 Chrome 浏览器下的显示效果。
这也解释了为什么不同分辨率的设备，对于 300px 宽度的 DIV 展示效果基本一致的情况。

window.devicePixelRatio

window 对象有个 devicePixelRatio 属性，其中也保存了设备像素比的值，因此我们不必经过上面的公式计算，就可以直接获取到设备像素比的值。
注意：你可以为这个 window.devicePixelRatio 重新赋值，但并不会对最终的显示造成任何的影响。


window.devicePixelRatio = 10
window.devicePixelRatio // 10

上面重新设置了 window.devicePixelRatio 的值，但不会影响浏览器的显示效果，也就是说，手动设置 window.devicePixelRatio 是没有任何用处的。

总结

本文总结了设备像素比的相关概念，先从同一份页面在不同分辨率的设备上表现一致的现象说起，引入了设备独立像素、PPI/DIP、CSS 中的像素和设备像素比的概念。
我们需要记住一点：1px 的 CSS 像素并不一定等于 1px 的物理像素，不同的设备会根据其对应设备像素比决定使用多少个物理像素显示 1px 的 CSS 像素。
另外，在移动端不建议使用 px 作为布局单位，而是应该使用 rem 或者百分比作为布局单位。

完。

作者：黑黢黢
链接：https://www.jianshu.com/p/c88e9489b583
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

YaoDeBiAn

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
理解设备像素比

移动端的设备多种多样，不同的设备又有不同的分辨率，低一点的有 800 * 400，中等的有 1280 * 720，高的有 1920 * 1080，甚至还有更高的 4k 屏等。我们在开发移动端页面时，将视口（viewport）设置为设备宽度（device-width）后，同一份页面在这些不同的设备上又怎样的表现呢？我们写一个测试页面，在 Chrome 中看看就知道了。同一份页面在不同设备上的表现测试...
复制链接

扫一扫