移动端---三个视口

布局视口layout viewport:

-决定页面的布局

手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口的宽度远大于屏幕的宽度，而布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。可以通过document.documentElement.clientWidth来获取 ；

在pc端，单独一个width为20%的元素最终拿到的值要根据初始包含块的width来决定，因为我们横向的布局都是按初始包含块开始填的，在移动端一样，不过我们这个时候应该叫它布局视口。

视觉视口visual viewport:

决定了用户能看到什么
一个css像素到底占据多少个物理像素和视觉视口有极大的关系
一个视觉视口的实际尺寸是确定的（屏幕尺寸）
一个视觉视口包含的物理像素的个数是确定的（分辨率）
一个视觉视口包含的css像素的个数是不确定的（用户的缩放行为有关）

视觉视口与设备屏幕一样宽，并且它的css像素的数量会随用户的缩放而改变。visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。

理想视口

设备独立像素所代表的值

我们分析知道：布局视口的默认宽度并不是一个理想的宽度，对于我们移动设备来说，最理想的情况是用户刚进入页面时不再需要缩放。这就是为什么苹果和其他效仿苹果的浏览器厂商会引进理想视口！只有是专门为移动设备开发的网站，他才有理想视口这一说。而且只有当你在页面中加入viewport的meta标签，理想视口才会生效。

<meta name="viewport" content="width=device-width" />

这一行代码告诉我们，布局视口的宽度应该与理想视口的宽度一致。