第119天：移动端：CSS像素、屏幕像素和视口的关系

移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素）和 CSS 像素之间的关系。这里首先了解以下几个概念。

一、视口

1、layout viewport（布局视口）

　　一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

2、visual viewport（视觉视口）和物理像素

visual viewport（视觉视口）物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。例如iPhone的物理像素：

iPhone5 ：640 * 1136
iPhone6：750 * 1334
iPhone6 Plus：1242 * 2208

3、ideal viewport（理想视口）和 dip （设备逻辑像素）

ideal viewport（理想视口）通常是我们说的屏幕分辨率。

dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。

比如MacBook Pro的 Retina （视网膜）屏显示器硬件像素是：2880 * 1800。当你设置屏幕分辨率为 1920 * 1200 的时候，ideal viewport（理想视口）的宽度值是1920像素，那么 dip 的宽度值就是1920。设备像素比是1.5（2880/1920）。设备的逻辑像素宽度和物理像素宽度（像素分辨率）的关系满足如下公式：

逻辑像素宽度*倍率 = 物理像素宽度

而移动端手机屏幕通常不可以设置分辨率，一般都是设备厂家默认设置的固定值，换句话说 dip 的值就是 ideal viewport（理想视口）（也就是分辨率）的值，比如，iPhone的屏幕分辨率：

iPhone5 ：分辨率 320 * 568，物理像素 640 * 1136，@2x
iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x
iPhone6 Plus ：分辨率 414 * 736，物理像素1242 * 2208，@3x，（注意，实际显示图像等比降低至1080×1920）

二、CSS像素

CSS像素（px）用于页面布局的单位。样式的像素尺寸（例如 width: 100px）是以CSS像素为单位指定的。CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素）。

1、使用viewport元标签控制布局

首先看一下viewport元标签极其属性：

 html 代码:

 <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

这里是每个属性的详细介绍：

属性名	取值	描述
width	正整数或 device-width	定义视口的宽度，单位为像素
height	正整数或 device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes/no	定义是否允许用户手动缩放页面，默认值yes

（1）width

width属性被用来控制layout viewport（布局视口）的宽度，layout viewport（布局视口）宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数，也可以设为device-width这一特殊值，一般为了自适应布局，普遍的做法是将width设置为device-width，例如：

 html 代码:

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

width=device-width 也就是将layout viewport（布局视口）的宽度设置 ideal viewport（理想视口）的宽度。网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素），而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率），dip 的宽度值是相等的。

（2）height

与width类似，但实际上却不常用。

（3）initial-scale

initial-scale用于指定页面的初始缩放比例：

 html 代码:

 <meta name="viewport" content="initial-scale=1.5" />

initial-scale=1 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度，initial-scale=1.5 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度的1.5倍。

（4）maximum-scale

maximum-scale用于指定用户能够放大的最大比例，例如

 html 代码:

 <meta name="viewport" content="initial-scale=1,maximum-scale=3" />

假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的3倍。

（5）minimum-scale

类似maximum-scale的描述，不过minimum-scale是用来指定页面缩小比例的。通常情况下，不会定义该属性的值，页面太小将难以阅读。

（6）user-scalable

user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes，可被缩放，你也可以将该值设置为no，表示不允许用户缩放网页。例如：

 html 代码:

 <meta name="viewport" content="user-scalable=no" />

三、屏幕像素

　　1、px（pixels）：物理像素，硬件像素，设备像素

　　2、dp,dip（deveice independent pixels）：逻辑像素、设备无关像素、CSS像素

　　3、pt（point）：1/72英寸

　　4、dpr（devicePixelRatio）: 设备像素缩放比，即 1dp的长度相当于几个px的长度

　　5、ppi,dpi：像素密度（像素每英寸），斜向一英寸里的物理像素数量

　　6、em: 相对于父元素的font-size的相对单位。

　　7、rem: 相对于根元素的font-size的相对单位。

　　8、vw: 1% 布局视口宽度

　　9、vh: 1% 布局视口高度

　　10、分辨率：横向物理像素数 * 纵向物理像素数

iPhone5为例

物理像素：640 * 1136。屏幕尺寸：4英寸。对角线物理像素数：开根号(1136 * 1136 + 604 * 640) = 1304。ppi = 1304 / 4 = 326。默认dpr：2。逻辑像素：568 * 320

ppi与默认dpr对应关系：(规律：每英寸里面的点越多，让越多的点来充当一个px)

ppi 默认dpr

ldpi 120 0.75

mdpi 160 1.0

hdpi 240 1.5

xhdpi 320 2.0

Retina屏（视网膜屏）: ppi 大于320

设备尺寸列表 https://material.io/devices/

四、视口与缩放

布局宽度：布局视口的逻辑像素的数量

屏幕宽度：屏幕的逻辑像素的数量（视觉视口、可见视口、虚拟视口）

逻辑宽度：逻辑像素的数量

视觉宽度：横向长度

chrome 实验结论：桌面浏览器设置viewport无效，但可以手动缩放。移动浏览器设置viewport有效，但也能手动缩放。

桌面浏览器以屏幕宽度进行布局，手动缩放，相当于改变dpr，以缩小为例：

　　1、缩小后，dpr变小，viewport的视觉宽度不变，逻辑宽度变大

　　2、缩小后，百分比宽度的元素，百分比仍然生效，逻辑宽度和视觉宽度跟着父元素变化。默认情况下，<html>是viewport的 100%，因此<html>的视觉宽度不变，逻辑宽度变大。

　　3、缩小后，固定宽度的元素，逻辑宽度不变，视觉宽度缩小。

　　4、文字无法无限缩小，缩小到一定程度后继续缩小，视觉宽度不变，dpr变小，逻辑宽度变大。

总结：缩小，dpr变小；元素逻辑宽度不变，视觉宽度变小；视觉宽度不能变小的（viewport,百分比宽度的元素，小字），视觉宽度不变，逻辑宽度变大。

移动浏览器viewport设置initial-scale缩放。以缩小为例

　　1、viewport的逻辑宽度和视觉宽度初始都为width，逻辑宽度不变，视觉宽度以initial-scale缩小；视觉宽度缩小到跟屏幕一样宽时，不再缩小，变成逻辑宽度变大，视觉宽度不变。

　　2、百分比宽度的元素，变化规律跟viewport一样

　　3、固定宽度的元素，逻辑宽度不变，视觉宽度缩小。

　　4、无法缩小到文字不能再缩小的程度

总结：viewport视觉宽度缩小到屏幕宽度之前，viewport、百分比宽度元素、固定宽度元素，都是逻辑宽度不变，视觉宽度以同等比例缩小。

移动浏览器手动缩放

不分viewport、百分比宽度元素、固定宽度元素，全都是视觉宽度缩放，逻辑宽度不变。

viewport 设置

mininum-scale=,maximum-scale=,user-scalable=no">

　　width：布局宽度，相当一部分手机浏览器默认为 980px

　　deveice-width：屏幕宽度

　　initial-scale：初始缩放比例

　　mininum-scale：最小缩放比例

　　maximum-scale：最大缩放比例

　　user-scalable：是否允许用户缩放

情况一：未设置<meta name="viewport">

那么布局宽度width=980px，初始缩放initial-scale为自动（缩放到屏幕大小）

情况二：viewport只设置width，不设置initial-scale

那么initial-scale为自动

情况三：viewport只设置initial-scale=1，不设置width

那么width=device-width

情况四：viewport只设置initial-scale !=1，不设置width

那么Android width=980px，IOS width=device-width

五、视口与JS

screen.width 屏幕的逻辑像素的数量

window.innerWidth 浏览器的逻辑像素的数量（包含滚动条占据的宽度）

document.documentElement.clientWidth viewport的逻辑像素的数量

document.documentElement.offsetWidth 根元素<html>的逻辑像素的数量

window.pageX/YOffset 布局视口相对于可见视口的位移

window.devicePixelRatio 屏幕dpr

orientationchange 屏幕转向事件