移动端web开发基础概念

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

分辨率

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

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

clipboard.png

PPI

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

clipboard.png

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

clipboard.png

设备像素和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倍大小的图片,就是为了避免图片放大而发生模糊。

clipboard.png

设备像素比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);
  }
}

你可能感兴趣的:(retina,移动web开发)