一、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像素）所呈现的视觉大小是一致的。不同的只是他们对应（覆盖）的物理像素个数。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery