移动端web开发基础概念

最近在了解移动端web开发的相关知识，有些概念总是模糊不清，这次花费了一些时间整体的梳理了一遍。

分辨率

分辨率可以从显示分辨率与图像分辨率两个方向来分类。显示分辨率(屏幕分辨率)是屏幕图像的精密度，是指显示器所能显示的像素有多少。图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义。——360百科

显示分辨率指显示器所能显示的像素多少。如iPhone的分辨率：640x960，640x1136等。图像分辨率指单位英寸中所包含的像素点数（PPI）。如下图中PS新建文件的截图。

PPI

PPI所属的上下文环境不同，意义也会不一样。当我们在谈论显示设备的PPI时，它指的是屏幕像素密度；和图片相关时，我们谈论的是打印时的分辨率或打印机的打印精度（在此种情况下，即是上文中提到的图像分辨率）。
在这里我们只关注屏幕像素密度。
让我们再次回到概念，每英寸的像素数量。英寸是长度单位，即它指的是长、宽、对象线每英寸里的像素数量。在1英寸的长度里，像素数量越多，PPI值越大。

PPI有相应的计算公式：PPI=√（X^2+Y^2）/ Z （X：长度像素数；Y：宽度像素数；Z：屏幕尺寸）。
如下图，是苹果6s的部分规格参数，根据公式计算可以得出：PPI=√（1334^2+750^2）/ 4.7=325.6≈326。与苹果提供的参数相符。
在下图中，屏幕分辨率，屏幕尺寸，PPI都是官方给出的数据。可以知道，这三个数据都是固定的值，它只与手机的型号有关。因此，此处的像素应该是设备像素或物理像素。

设备像素和css像素

设备像素

设备像素：定义了我们使用的设备的分辨率，一般来说可以通过screen.width/height来得到屏幕的大小。这个值是固定的，它只与设备有关。

css像素

css像素：又称设备独立像素（DIP），独立于设备的用于逻辑上衡量像素的单位。它的宽度不是一个固定的值。比如在网页上创建一个width:500px;height:500px的div;当默认缩放比为100%的时候，一个css像素对应一个设备像素。当通过浏览器的缩放功能来改变缩放比为200%的时候，一个css像素的宽度等于两个设备像素的宽度。此时div的宽高仍然是500px * 500px。但是一个css像素的大小却等于4个设备像素的大小。

高清显示屏

高清显示屏起源于retina。它是一种由苹果公司设计和委托制造的显示屏。它的特点是，具备足够高的像素密度而使人眼无法分辨其中单独像素点的液晶屏。
如下图，假设屏幕大小为1英寸，左图是普通屏，右图是retina屏，可以看出，右图的像素密度要远大于左图。在常规的缩放比（100%）下，蓝色部分是需要在网页上展示的地方。根据一个css像素对应一个物理像素，可以知道，右图的显示部分视觉上看起来将会特别小。
为了让左右图在视觉上看起来一样，我们需要做的，就是让右边的图的1个css像素等于多个物理像素的大小。即将图片进行了一个放大处理。但是这样做的后果就是图片在视觉上变模糊了。
在移动端开发中，我们常常需要为高清显示屏准备2倍大小的图片，就是为了避免图片放大而发生模糊。

设备像素比devicePixelRatio

devicePixelRatio = 物理像素 / 设备独立像素（css像素）
设备像素比可以用来区分普通显示屏和高清显示屏。devicePixelRatio值在1.5及以上的手机屏幕，是高清显示屏，为1.0为普通屏。
如，iPhone4的物理像素宽度为640px;css像素宽度为320px;可以得出devicePixelRation = 2;可以知道，iPhone4是高清显示屏。
在移动web开发中，为了让retina屏下的图片也可以清晰显示，我们需要给retina屏准备另一套大尺寸的图片，确保图片不会放大而变模糊。我们可以根据devicePixelRatio值来判断应该加载的图片尺寸。

 

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
    background-image: url(img_2x.png);
  }
}