一、meta标签的效果

 

　　移动端页面一般会在head头部添加如下meta标签。

 

　　该meta标签是否添加对页面渲染的影响

 

　　在移动端，未添加该meta标签时，html元素的宽度一般为980px；添加该meta标签之后，html的宽度与设备物理尺寸宽度一致。

 

　　二、几个名词和单位

 

　　设备物理像素

 

　　设备物理像素又被称为设备像素，是显示器设备上的一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。

 

　　设备物理像素的物理尺寸是固定的。在移动端浏览器中，设备物理像素的物理尺寸只与设备有关，不随手指的缩放而缩放。

 

　　设备独立像素

 

　　设备独立像素也被称为密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素（例如：CSS像素），然后由相关系统转换为物理像素。

 

　　设备独立像素的物理尺寸是不固定的。在移动端浏览器中，设备独立像素的物理尺寸随着手指的缩放而缩放。

 

　　image.png

 

　　CSS像素

 

　　CSS像素是设备独立像素的一种，是一种抽象单位，主要作用在浏览器上。

 

　　设备像素比（dpr）

 

　　设备像素比等于设备物理像素与设备独立像素（在浏览器中为CSS像素）的比值。可以通过window.devicePixelRatio获取移动设备的像素比。

 

　　分辨率（pt）

 

　　表示设备屏幕在水平和垂直方向上的物理像素个数。例如，iPhone6的分辨率为750pt * 1334pt。

 

　　屏幕尺寸

 

　　表示屏幕对角线的长度，单位为英寸（in），1英寸等于2.54厘米。例如：iPhone6的屏幕尺寸为4.7英寸。

 

　　像素密度（ppi）

 

　　指每英寸屏幕上诉拥有的物理像素数目。计算公式为：PPI=（横向像素2 +纵向像素2 ）1/2 /屏幕尺寸。例如：iPhone6的像素密度等于 （7502 +13342 ）1/2 /4.7=326。

 

　　三、视口

 

　　三个视口

 

　　布局视口、视觉视口和理想视口。以下视口中所涉及的像素均为CSS像素，并且默认不考虑缩放。

 

　　布局视口

 

　　布局视口指网页布局区域。该视口取决于网页制作时的CSS样式，与用户设备无关。 布局视口宽度可以通过document.documentElement.clientWidth得到。

 

　　html根元素的包含块即是初始包含块，如果给html元素设置width: 100%; height:100%的CSS样式，则该页面的布局视口尺寸等于初始包含块的尺寸。

 

　　视觉视口

 

　　视觉视口指设备物理屏幕的可视区域。该视口与用户设备有关，在PC端浏览器和移动端浏览器上表现不同。

 

　　在PC端浏览器中：视觉视口的宽度与浏览器可视窗口的宽度一致。

 

　　在移动端浏览器中：①当无viewport对应的meta标签时，为了正常显示那些传统的为PC端浏览器设计的网页，移动设备浏览器一般都会通过一个小于零的默认初始缩放比例（initial-scale）将默认视觉视口宽度设置为980px或1020px，大于浏览器的宽度。②当设置viewport对应的meta标签且缩放比例为1.0时，视觉视口的宽度等于浏览器的宽度。③当用户手动缩小网页时，视觉视口变大；当手动放大网页时，视觉视口缩小。需要注意的是，用户手动缩放网页时，只影响视觉视口，布局视口保持不变。

 

　　注释：布局视口是网页的CSS尺寸，视觉视口是用户在浏览器屏幕上可见的CSS尺寸。

 

　　理想视口

 

　　布局视口等于视觉视口时产生理想视口。

 

　　理想视口中的网站拥有最理想的浏览和阅读的宽度，用户刚进入页面时不再需要缩放，并且没有横向滚动条。

 

　　当添加以下meta标签时，就将当前理想视口的宽度设置为设备宽度，同时不允许用户手动缩放。

 

　　四、Retina屏幕与普通屏幕

 

　　在上面讲了， 设备像素比（dpr）等于设备物理像素（分辨率）与设备独立像素（在浏览器中为CSS像素）的比值，可以通过window.devicePixelRatio获取移动设备的像素比。

 

　　在大部分PC设备以及早期的移动设备中，屏幕像素密度比较低，设备像素比（dpr）等于1，一个设备独立像素（CSS像素）对应一个物理像素。随着技术的发展，移动设备的像素密度越来越高，设备像素比（dpr）等于2或者3，一个设备独立像素（CSS像素）对应2或3个物理像素。

 

　　在不同屏幕上，不论是设备像素比（dpr）等于几，一个设备独立像素（CSS像素）所呈现的视觉大小是一致的。不同的只是他们对应（覆盖）的物理像素个数。

 

　　对于iPhone6设备的Retina屏幕而言，设备物理像素数（分辨率）为750pt * 1334pt，当缩放比例为1时，视觉视口为375px * 667px，设备像素比（dpr）为2，一个CSS像素对应4个物理像素。对于大部分PC端设备或早期移动设备等普通屏幕上，当缩放比例为1时，设备像素比（dpr）为1，一个CSS像素对应1个物理像素。他们的屏幕表现对比图如下：

 

　　image.png

 

　　五、图像显示

 

　　当一个设备独立像素（CSS像素）对应一个物理像素时，图片才能够完美清晰的显示。

 

　　当一个设备独立像素（CSS像素）对应多个物理像素时，由于设备独立像素（CSS）像素已经是最小的数据单位，不能被继续切割。为了能够显示出来，只能就近取色，从而导致图片模糊的问题。

 

　　image.png

 

　　设备像素比（dpr）大于1时，一个设备独立像素（CSS像素）对应多个物理像素。此时需要提供与设备像素比（dpr）同倍数大小的图片，这样就能够解决图片模糊的问题。例如：对于dpr为2的Retina屏幕，一个200px * 300px的img标签，需要提供400 * 600的原型图片。

 

　　当一个物理像素对应多个设备独立像素（CSS像素）时，由于物理像素是显示器设备上可以设置自己颜色和亮度的最微小部件。为了能够显示出来，只能够通过一定的算法进行缩减显示，从而导致图片出现色差的问题。

 

　　image.png

 

　　下面是一张100 * 100的图片分别放在100px * 100px、 50px * 50px、 25px * 25px的img容器中，在设备像素比（dpr）为2的屏幕中的显示效果。

 

　　image.png

 

　　条形图，通过放大镜其实可以看出边界像素点取值的不同：

 

　　①图1，就近取色，色值介于红白之间，偏淡，图片看上去会模糊（可以理解为图片拉伸）。

 

　　②图2，没有就近取色，色值要么是红，要么是白，图片看上去很清晰。

 

　　③图3，就近取色，色值介于红白之间，偏重，图片看上去有色差，缺少锐利度（可以理解为图片挤压）。

 

　　六、1px边框问题

 

　　如果页面中DOM元素的CSS样式设置边框宽度为1px。

 

　　① 对于设备像素比（dpr）为1的设备，1个设备独立像素（CSS像素）对应1个物理像素。则显示在浏览器屏幕上的边框占1个物理像素宽度。

 

　　② 对于设备像素比（dpr）为2的设备，1个设备独立像素（CSS像素）对应2个物理像素。则显示在浏览器屏幕上的边框占2个物理像素宽度。