移动端开发教程之像素的显示问题汇总

前言

相信在移动端开发的过程中大家都会发现，移动端的显示一般与桌面端的不一样。比如在iphone6上显示一个1334x750像素大小块状元素，虽然在苹果官网上iphone6标称的屏幕像素密度是1334x750规格，但是我们却发现这个1334x750像素大小的块状元素却不能铺满整个屏幕。

那到底是为什么呢？下面从几个方面来作探讨。

像素密度（PPI）

PPI(Pixel Per Inch)，即表示每英寸有多少像素，类似于人口密度和建筑密度，如下图举例了几种PPI的表示。

以iphone6为例，一般像素密度的计算公式为： Math.sqrt(1366*1366 + 640*640)

但是要计算这个PPI，那么我们先要知道设备的屏幕上到底有多少个像素，也就是Pixel Per Inch 中的第一个Pixel。

设备像素（DP）&& 设备像素比（DPR）

设备像素（Device pixel），也称物理像素（Physical pixel），也就是本文一开始提到iphone6的屏幕规格。像素密度中所指的像素就是设备像素，对于一般的显示设备来说，一个像素对应着屏幕上的一个发光点，因此PPI也称为DPI（dots per inch），但是这仅在显示设备上才等价，比如在打印机上就不一样了。

由于市面上每一台手机的屏幕规格不一样，有的是720P，有的是1080P，甚者是2K等等，这些设备的屏幕有些像素多，有些像素少，如果同样显示一个像素的话，则会出现像以下的情况：

越高PPI的屏幕，显示一个像素点的面积就越小，一张由4x4个像素点组成的图显示在PPI为64的屏幕上，那么换到256PPI的屏幕上显示则会缩小为原来大小的一半。

反过来，如果要在PPI为256的屏幕上显示效果与PPI为64的屏幕一样，那么得要把图片放大2倍。

因此配有高清屏幕的手机，厂商为了其设备的可用性，即图标和文字可以被正确识别和准确点击，就必须保证各类素材在其设备上的显示与标清设备一样，而这个解决方法就是把所有尺寸都放大若干倍。这个放大比例就叫作设备像素比(Device Pixel Ratio, DPR)，一般DPR对应着下面这个表：

  ldpi mdpi hdpi xhdpi ppi 120 160 240 320 dpr 0.75 1.0 1.5 2.0

因此高清设备上应该配有高清图片显示，不然图片在高清设备上放大后没有足够的像素显示其细节，那么这张图片就会变得看起来很模糊。

CSS像素

讲了这么多概念，仿佛还是没有很好地解释文章开头的问题。下面讨论完CSS像素后估计大家会有一个比较清晰的概念。

我们通宵在写CSS的时候会用到像素单位px，但是这个像素单位并不一直是与设备像素一一对应，也就是说在CSS中1px（像素）不是对应着设备屏幕中的一个像素点。为了与设备像素区别，CSS中所指的像素px我们一般称为CSS像素。也就是说CSS像素是一个虚拟的、相对的单位。

例如在页面上画一个300px宽的块元素，在一般的显示器下它只会占屏幕的一部分，但如果我们手动地去放大页面，很快这个块状元素也会充满整个页面。由此说明，一般情况下CSS像素与系统分辨率下的像素大小相等，即在标清设备中，一个CSS像素应该是与一个设备像素大小相等的。但是是高清设备或者用户缩放的过程中，一个CSS像素也有可能等于多个设备像素。

举另外一个例子，在移动原生应用开发中，如果必须以一个设备像素为单位进行开发，那将会是一件非常痛苦的事，因为不是每一台移动设备的系统分辨率都是对应着一个设备像素，有的是1:2，有的是1:2.46，正是因为有这种差异，在安卓开发中会有例如dp,dt这种单位（在iOS中会有pt单位），当我们给一个元素定义大小时，只需要给定一个dp值，系统将会根据这个值再与系统分辨率与设备像素的比值（即DPR）进行换算，最终计算出显示在屏幕上的实际设备像素。

上面所指出的dp这种抽象单位称为设备无关像素（device independent pixel）。当然CSS像素也属于设备无关像素，我们在写CSS像素的时候，不用关心一个CSS像素对应着多少个设备像素，系统会自动地根据DPR来帮我们换算好。我们要关心的只是如何保证网页元素因为系统换算而导致被放大的时候下，还能清晰地展示在设备上。

视口（Viewport）

正常来说，在移动端打开一个页面，如果浏览器先会以正常的比例来渲染页面，然后再自动地设置一个比例来缩放页面，目的是为了让内容更好地展示出来，即页面内容刚好铺满整个手机屏幕，当然如果页面没有禁止掉用户缩放的话，你也可以用两个手指把页面缩放回原始的比例。这整个过程就是通过视口（viewport）来实现的，原始页面渲染好后通过视口缩放使得与系统宽度一样，从而可以完整地展示页面。

(图片来自tgideas团队博客)

我们可以通过在content中添加inital-scale属性来控制渲染时视窗的缩放比例，把它设置为1则无缩放。

<meta name="viewport" content="initial-scale=1">

我们也可以定义device-width属性来控制viewport的宽度

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

一般在移动开发中我们会设置不允许用户缩放，并把最大、最小缩放比设为1

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

总结（Summary）

通过连续几天的翻阅资料与探索，终于完整地对移动开发最入门的地方有了准确的理解，之前也只是一直把meta里的代码直接复制过来用就是了，一直没去弄清楚，这次趁着有空并且手上刚好有相关的资料，一并整体地走一遍，最后记录成此文档，希望对日后甚至会对大家有帮助。

参与资料：

1.深入了解viewport和px

2.高性能响应式Web开发实战