手机的设备独立像素、分辨率和设备像素比到底是什么？

本篇文章介绍移动端网页开发中要遇到的一些概念，理解了这些概念，你就可以快速入门移动端网页开发了。

需要注意的是：电脑上并没有设备独立像素的概念，这里也不会做介绍。

在这之前，我先介绍一下我用的手机，我用它来说明这些概念。

我有一台坚果 Pro

坚果 Pro 的一些参数信息如下：

• 设备独立像素：360 * 640。
• 分辨率：1080 * 1920。
• 设备像素比：3。

设备像素比

设备像素比，英文名是 Device Pixel Ratio，简称 DPR。但我想说的重点不是这个，我想说：设备像素比 = 分辨率 / 设备独立像素。

我们可以用 JavaScript 的 window.devicePixelRatio 接口获得这个值。

分辨率

我写了一个网页，里面有一个 div，长 360px，宽 640px。

我们用手机打开来 看一下 。

能看到，div 占据了手机水平宽度的 1/3，手机垂直高度的 1/3（上下 bar 的高度计算在内）。

这里就得出一个结论：1 CSS 像素等于 1 单位的分辨率。

需要注意的是，我们并没有能够获得手机分辨率的 JavaScript 接口。

但如果把这样的网页直接在手机上浏览，看起来就不是很方便。

把整个网页都显示在手机小小的一方屏幕上，看起来字太小了，为了看清，我们势必要放大来看。

如果 是这样的，就好了。

为了能做到这样，就要知道设备独立像素了。

设备独立像素

为了让网页适配移动端，我们通常要在网页的 head 里头加上这样一个 meta 标签。

<meta name="viewport" content="width=device-width">

这样的结果是：1 CSS 像素等于 1 单位的设备独立像素，等于 3 个单位（针对坚果 Pro）的分辨率了。

此时再打开页面 查看。

可以看到，div 的宽度刚好充满手机宽度（而在高度上富裕出来的空间是因为有上下 bar 占据手机屏幕高度的原因，否则也是刚好充满屏幕高度的）。

使用 JavaScript 的 window.screen.width 和 window.screen.height 就能获得设备独立像素。

图片渲染的问题

设置好适配移动端的 meta 标签后，网页里的文字和颜色之类的渲染是没有问题的，但是图片渲染就会有问题。

举个例子，网页里有一个设定宽 128px、高 85px 的图片

img {
    width: 128px;
    height: 85px;
}

如果我们直接采用 128px * 85px 大小的图片，那么在 手机上看就会模糊。

根本原因是：图片的 1 像素始终等于 1 单位分辨率，但是坚果 Pro 却用 3 * 3 的分辨率阵容渲染图片上的每块像素----也就是把图片放大了 3 倍显示。

所以针对坚果 Pro 这种设备像素比是 3 的手机，网页里插入的图片尺寸总要是网页中设定宽高的 3 倍，才能保证图片在消耗最少带宽的情况下 保证图片的清晰度。

右面图片的尺寸是 384px * 255px，可以看到是清晰的。

本作品采用《CC 协议》，转载必须注明作者和本文链接