在移动端的开发过程中，大家会发现移动端的显示与桌面端的显示普遍存在差异。比如在iphone6上显示一个大小为1334x750像素的块元素。虽然苹果官网标称的iphone6屏幕像素密度为1334x750，但我们发现1334x750像素大小的块状元素无法覆盖整个屏幕。所以为什么？我们从几个方面来讨论。像素密度（PPI）PPI（PixelPerInch），意思是每英寸有多少像素，类似于人口密度和建筑密度。下图说明了几种PPI表示。以iphone6为例，计算像素密度的一般公式为：Math.sqrt(1366*1366+640*640)但是要计算这个PPI，我们首先要知道设备的屏幕上有多少像素，即PixelPerInch中的第一个像素。设备像素（DP）&&设备像素比（DPR）设备像素（Devicepixel），也称为物理像素（Physicalpixel），就是本文开头提到的iphone6的屏幕规格。像素密度中所指的像素为设备像素。对于一般的显示设备来说，一个像素对应屏幕上的一个发光点，所以PPI也叫DPI（dotsperinch），不过这个只有在显示设备上才有。等价的，比如在打印机上是不一样的。因为市面上每款手机的屏幕规格都不一样，有的是720P，有的是1080P，有的甚至是2K等等，这些设备的屏幕有的像素多，有的像素少。如果也显示一个像素，会出现如下情况：PPI越高的屏幕，一个像素显示的面积越小，在PPI为64的屏幕上显示一张4x4像素组成的图片，则显示在具有256PPI的屏幕上将缩小到原始尺寸的一半。反之，如果想在PPI为256的屏幕上显示出与在PPI为64的屏幕上相同的效果，则必须将图片放大2倍。因此，对于高清屏的手机，厂商为了设备的易用性，必须保证其设备上各种材质的显示与标清设备一致，即能够正确识别图标和文字。并准确点击。所有尺寸都放大了数倍。该放大倍率称为设备像素比(DPR)。一般来说，DPR对应下表：足够多的像素来揭示它的细节，图像看起来会很模糊。CSS像素讲了那么多概念，好像文章开头的问题没有很好解释。下面讨论完CSS像素，估计大家会有一个比较清晰的概念。我们在通宵写CSS的时候使用像素单位px，但是这个像素单位并不总是和设备像素一一对应的，也就是说CSS中的1px（像素）并不对应设备屏幕上的一个像素。为了区别于设备像素，CSS中所指的像素px一般称为CSS像素。也就是说，CSS像素是一个虚拟的、相对的单位。比如你在页面上绘制一个300px宽的块状元素，在正常显示下它只会占据屏幕的一部分，但是如果我们手动放大页面，这个块状元素很快就会填满整个页面。由此可见，一般情况下，一个CSS像素等于系统分辨率的像素大小，即在标清设备中，一个CSS像素应该等于一个设备像素大小。但是在高清设备或者用户缩放的过程中，一个CSS像素也可能等于多个设备像素。再举个例子，在移动原生应用的开发中，如果需要以一个设备像素为单位进行开发，那将是一件很痛苦的事情，因为并不是每一个移动设备系统分辨率都对应一个Device像素，有的是1:2，有的是1:2.46，正是因为这个区别，Android开发中会有dp,dt这样的单位（iOS中会有pt单位），当我们定义一个元素的size时，只需要给一个dp值，系统会将这个值换算成系统分辨率与设备像素的比值（即DPR），最终计算出屏幕上实际显示的设备像素。上面指出的dp这个抽象单位叫做设备无关像素（deviceindependentpixel）。当然，CSS像素也是与设备无关的像素。我们在写CSS像素的时候，不需要关心一个CSS像素对应多少个设备像素。系统会根据DPR自动帮我们转换。我们需要关心的是，当网页元素因系统转换而被放大时，如何保证网页元素能够在设备上清晰显示。视口（Viewport）一般情况下，在移动端打开一个页面时，如果浏览器先以正常比例渲染页面，然后自动设置一个比例缩放页面，目的是为了让内容更好的展示出来，即也就是说，页面的内容刚好覆盖了整个手机屏幕。当然，如果页面没有禁止用户缩放，也可以用两根手指将页面缩放回原来的比例。这整个过程都是通过视口来实现的。原始页面渲染完成后，缩放视口使其与系统宽度相同，从而使页面完整显示。（图片来自tgideas团队博客）我们可以通过给内容添加inital-scale属性来控制渲染时窗口的缩放比例，设置为1表示不缩放。
