移动端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);
  }
}