关于移动端像素的显示问题

在移动端开发的过程当中你们都会发现，移动端的显示通常与桌面端的不同。好比在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开发实战