很多小伙伴对viewport的理解不是很透彻，于是这一篇重点聊聊viewport(视图)的知识点。以帮助大家更加容易理解移动端H5页面的适配方案。

解读移动H5适配最重要的html标签：meta视口标签

meta视口标签是是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口的尺寸相匹配。meta视口标签存在5个指令：

width：设置布局视口的宽度，一般设为device-width。

initial-scale：初始缩放比例。1即100%，2即200%，以此类推

maximum=scale：最大缩放比例。

minimum-scale：最小缩放比例。

user-scalable：是否静止用户进行缩放，默认为no。

需要注意的是，缩放是根据理想视口进行计算的。缩放程度与视觉视口的宽度是逆相关的。也就是说，当你将屏幕放到到2倍时，视觉视口为理想视口的一半，此时每单位的CSS像素等于2个设备像素。缩小时则相反。

1、布局视口(layout viewport)

可以看作是html元素的上一级容器即顶级容器，默认情况或者将html元素的width属性设为100%时，会占满这个顶级容器，此时用

document.documentElement.clientWidth

获取到html元素的布局宽度也就是布局视口的宽度，使用媒体查询时 max-width 和 min-width 的值指的也是布局视口的宽

2、布局视口的宽度和高度单位是像素px，

这个单位是CSS和JS中使用的抽象单位，为了便于区分称作CSS像素。布局视口的宽度有一个默认值，一般在 768px ~ 1024px 之间，最常见的宽度是 980px，在这个默认值下进行布局得到的页面比较接近PC端布局的效果。

3、可视视口(visual viewport)

是指用户可见页面区域，其宽度值为横向可见CSS像素数，从另一个角度理解，可视视口的宽度决定了将屏幕横向分为多少份，每份对应一个CSS像素，使用window.innerWidth可以获取到可视视口的宽度

4、理想视口(ideal viewport)

是一个比较适合页面布局使用的视口尺寸，作为计算布局视口和可视视口尺寸时的一个基准值，下面代码中 device-width 的值就是理想视口的宽度

使用screen.width，也可以获取到理想视口的宽度

5、三个视口中，只有理想视口的尺寸是不能改变的

由设备和浏览器决定，与设备的物理像素数存在着比例关系，这个比例就是设备像素比(device pixel ratio， dpr)，即有 设备像素比 = 物理像素数 / 理想视口尺寸，举例iphone5屏幕横向有640个物理像素，其理想视口宽为320，则 dpr=2，可以使用window.devicePixelRatio获得dpr，但在安卓系统下这个值可能不符合预期。

6、可视视口的尺寸收到缩放比例的影响

因此用户手动缩放和在 meta 标签中设置 initial-scale 的值都会改变可视视口的尺寸，可视视口的尺寸越小即显示的CSS像素数越少，则单位CSS像素对应的可使区域越大，对应的缩放比也就越大。

缩放比例是相对于理想视口而言的，即有 缩放比例 = 理想视口尺寸 / 可视视口尺寸。

对iphone5，设置

则其可视视口尺寸为640个CSS像素

缩放比例也有默认的值，没有设置 initial-scale 时，浏览器会取适当的缩放比例使 布局视口正好铺满屏幕即有 布局视口尺寸 = 可视视口尺寸

7、布局视口的宽度受到 meta 标签中的 width 和 initial-scale 的影响

仅设置 width 的值时，这个值就是布局视口的宽度，width的值可以为正整数或特殊值 device-width

此时由于没有禁用缩放，一般可以通过双击屏幕对页面进行缩放，但手动缩放不会影响布局适口的尺寸，只会影响到可视视口的尺寸，而且可能导致布局视口小于可视视口

设置 initial-scale 的值时，布局视口的尺寸与可视视口的计算方式相同，但不受手动缩放的影响，同时设置 width 和 intial-scale 的值时，布局视口的宽取上述两个值中较大的一个。

8、布局视口宽 = 可视视口宽时

html 元素正好横向铺满窗口(但其后代元素若有横向 overflow 的情况，仍然会出现滚动条)，布局视口宽 > 可视视口宽时，出现横向滚动条。

9、弹性布局的开发原则

web app是一种典型的弹性布局：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放。以图描述：

这个规则是一套基本的适配规则，对于这种简单app来说已经足够，同时它也是后面要说的rem布局的基础。

10、移动端背景图片 适配的三种方法

(1)、响应式布局

简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间。

(2)、Cover布局

就跟background-size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。

(3)、Contain布局

同样，也跟background-size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。个人比较推荐用这种方式，但在设计上需要背景为单色，或者是可平铺的背景。

由上述规则可以得到一些有用的结论：

1、将 meta 标签中的 width 设为 device-width 同时禁用手动缩放可以使 布局视口尺寸 = 可视视口尺寸 = 理想视口尺寸，此时 设备像素比 = 物理像素数 / 理想视口尺寸 = 物理像素数 / 布局视口尺寸，对iphone5，一个CSS像素对应4个物理像素

2、为 initial-scale 设置任意合法的值同时禁用手动缩放就可以使布局视口尺寸 = 可视视口尺寸

3、将 initial-scale 设置为 1 也可以使 布局视口尺寸 = 可视视口尺寸 = 理想视口尺寸