布局视口
在移动端，浏览器厂商面临着一个比较大的问题，他们如何将数以万计甚至可以说是数以亿计的pc端网页完整的呈现在移动端设备上，并且不会出现滚动条。
这个时候，视口的宽度还是和浏览器窗口的宽度一致。我们都知道pc端的页面一般都为960px或者1024px。那么要完整的放下它们，我们移动端浏览器必须要有个容器放下它，而且只有有了这个容器我们才能规定移动端的浏览器到底能放下多大的页面。
这个容器我们称为布局视口。
布局视口决定网页的布局。
常见设备的布局视口大小：
| 设备名 | 布局视口大小 |
|---|---|
| iPhone | 980px |
| ipad | 980px |
| Android Samsung | 980px |
| Android HTC | 980px |
| Chrome | 980px |
| Opera Presto | 980px |
| BlackBerry | 1024px |
| IE | 1024px |
布局视口的单位参照与css像素。
视觉视口
视觉视口决定用户可以看到的页面大小所包含的css像素。
视觉视口的单位同样也参照与css像素。
- 视觉视口的大小，（即用户所能看见页面的css像素的多少）跟用户的缩放行为有关。当用户放大时，视觉视口变小（用户看到的css像素变少）；当用户缩小时，视觉视口变大（用户看到的css像素变多）
- 默认情况下，视觉视口完整的包住布局视口。（想象以下把pc端页面扔到移动端上时的场景）
理想视口
我们分析知道：布局视口的默认宽度并不是一个理想的宽度，对于我们移动设备来说，最理想的情况是用户刚进入页面时不再需要缩放。这就是为什么苹果和其他效仿苹果的浏览器厂商会引进理想视口！只有是专门为移动设备开发的网站，他才有理想视口这一说。而且只有当你在页面中加入viewpoint的meta标签，理想视口才会生效。
<meta name=“viewport” content=“width=device-width”>
这一行代码告诉我们，布局视口的宽度应该与理想视口的宽度一致。
理想视口包含css像素的个数等于独立设备像素的值。
也就是说当用户没有缩放行为的情况下，布局视口=视觉视口=理想视口=独立设备像素。
如何获取三大视口
获取布局视口
var layout = document.documentElement.clientWidth;//layout的宽度，没有兼容性的问题
获取视觉视口
var visual = window.innerWidth;//visual的宽度，接近全部支持
获取理想视口
var dream=screen.width;//一半代表理想视口的宽度，一半代表设备的分辨率！！有很大的兼容问题
因为我们移动端都会加meta标签，所以我们只需要获取布局视口的大小即可。
