第一章：html5概要（对viewport的认识）

初始包含块

在css规范中，viewport被称为初始包含块。CSS中所有关于宽度的百分比均来源于初始包含块，同时，初始包含块将CSS布局限制在一个最大的宽度内。在桌面端，viewport的宽度就是浏览器窗口的宽度。因此，如果margin和padding都为0，html和body的宽度就是浏览器窗口的宽度。因此声明width:35%的元素其宽度未浏览器窗口宽度的35%。因此，初始包含块为页面布局提供了一个原始的尺寸，将页面限制在某一宽度内。这是PC端的情况，而在mobile端，情况就有所不同。

mobile端的三种viewport

移动端viewport设置的数值一般介于768至1024之间，常见的viewport为980。

也就是说，移动端的viewport不再与实际的移动端浏览器屏幕有关联，而是相互独立。这个viewport就被称为布局viewport，不过该viewport仍然将CSS布局限制在某一宽度，同时CSS中关于宽度的百分比大部分都来源于布局viewport。

尽管创建一个独立的布局viewport能将PC端的网站适配到移动端，但还是无法忽略移动设备的屏幕尺寸。这里，将用户当前看到的页面区域叫做可视viewport。可视viewport的尺寸跟移动设备的屏幕尺寸没有直接关系，用户通过缩放可改变可视viewport的尺寸，但出于设备性能的考虑，布局viewport不会重新计算，这是因为由于缩放在移动端的使用频率较高，如果布局viewport重新计算，设备的耗电量将大幅上升，因此mobile浏览器厂商会将布局viewport作为一个抽象层从PC端的viewport独立出来，使其不参与到用户的该交互行为。因此布局viewport尺寸不会受到影响。

默认的布局viewport并非理想的尺寸，于是Apple引入了理想viewport。它引入的目的是找到适合设备的布局viewport，对网站的宽度优化，使其适合浏览和阅读。

要获得理想viewport，其实我们已经很熟悉了，就是在html中加入以下meta标签：

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

它会告诉浏览器让布局viewport与理想viewport相匹配。

由于设备的物理尺寸不同，浏览器的理想viewport也有所不同，同时理想viewport会随着设备的手持方向而改变。

综上，在PC端，浏览器的窗口就是viewport，也就是初始包含块，它限制CSS布局的宽度，同时定义了用户当前所看到的区域。在mobile端，PC端的viewport一分为二：限制CSS布局的布局viewport；定义了用户当前看到区域的可视viewport。mobile端还有一个理想viewport，其尺寸与设备有关。通过meta viewport标签能将布局viewport设置为理想viewport，事实上响应式设计的基础就是它。

如上图，红色部分是布局viewport，黄色部分为理想viewport，有伸缩功能的边框就是当前设备的理想viewport

理想viewport会随着模拟设备的屏幕尺寸变化，相应地，由于meta viewport标签能将布局viewport设置为设备的理想viewport，布局viewport的宽度也随着理想viewport的宽度变化。

以上是将meta viewport设置为<meta name="viewport" content="width=device-width,initial-scale=1" />，若initial-scale=0.5，即<meta name="viewport" content="width=device-width,initial-scale=0.5" />，情况就有所不同。

6plus的布局宽度为414/0.5=828，也就是initial-scale的取值会影响到布局viewport。由于初始状态的缩放比为0.5，页面内容不清晰，通过读取横坐标，此时的可视viewport的宽度和布局viewport的宽度一样，也是828px。当页面缩放比增加到1.0，屏幕所看到的内容变少，但更加清晰，可视viewport就从828px变为414px，如下图：

如果不想让他缩放可以设置<meta content="width=device-width,user-scalable=no" name="viewport">

viewport中可指定的属性列表

属性	功能说明
width	宽度（像素）。默认值980，范围从200到10000。可指定为device-width
height	高度（像素）。默认值980，范围从233到10000。可指定为device-height
intial-scale	初始缩放比例。默认为将网页充满视界范围。测定范围从minimum-scale到maximum-scale
minimum-scale	最小缩放比例。默认为0.25。范围从0到10.0
maximum-scale	最大缩放比例。范围从0到10.0
user-scalable	是否允许进行缩放，指定yes或no