首先要了解三大视口的内容
第一：布局视口
layout viewport:
手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口的宽度远大于屏幕的宽度
布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。
可以通过document.documentElement.clientWidth来获取
在pc端，单独一个width为20%的元素最终拿到的值要根据初始包含块的width来决定，
因为我们横向的布局都是按初始包含块开始填的，在移动端一样，不过我们这个时候应该叫它布局视口。
第二：视觉视口
visual viewport:
视觉视口与设备屏幕一样宽，并且它的css像素的数量会随用户的缩放而改变
visual viewport的宽度可以通过window.innerWidth 来获取，
但在Android 2, Oprea mini 和 UC 8中无法正确获取。
第三：理想视口
###理想视口
我们分析知道：布局视口的默认宽度并不是一个理想的宽度，对于我们移动设备来说，最理想的情况是
用户刚进入页面时不再需要缩放。这就是为什么苹果和其他效仿苹果的浏览器厂商会引进理想视口！
只有是专门为移动设备开发的网站，他才有理想视口这一说。而且只有当你在页面中加入viewport的meta标签，
理想视口才会生效。
<meta name="viewport" content="width=device-width" />
这一行代码告诉我们，布局视口的宽度应该与理想视口的宽度一致
如有看法和意见随意说，毕竟每个人都又不一样的理解。