参考资料：https://www.kancloud.cn/jaya1992/fe-notes/86799
用户不能很好的通过手机等设备访问网页，因为平板太小。
apple公司提出了一个解决方案：利用viewport标签创建一个虚拟的布局视口（layout viewport）,这个视口的分辨率接近于PC显示器，Apple将其定义为980.也就是逻辑分辨率。
这就解决了早期的页面在手机上显示的问题。因为分辨率和pc基本上接近，所以问题不大，展示的也基本上很友好。
visual viewport:手持设备的可视区域
ideal viewport:完美视口
由于layout view的宽度是大于浏览器可视区域宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，也就是visual viewport,如下图：
所谓的完美适配指的是：不需要用户缩放和横向滚动条就能正常查看网站上的所有内容，文字大小合适，也叫做ideal viewport.
ideal viewport最适合移动设备的viewport，设置方法如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,use-scalable=0" />
解释如下：
width=device-width:viewport的宽度等于设备的宽度，不设置的话默认980宽度（默认viewport）会出现横向滚动条。
<meta name="viewport" content="initial-scale=1" />这行代码也可以设置为ideal viewport,为什么呢?这也是因为缩放是针对ideal viewport来设置的
完美的写法收尾：
在width=device-width的时候，在ipone和ipad上，无论是横屏还是竖屏，宽度都是ideal viewport的宽度
当inital-scale=1的时候，windows phone上的ie无论是竖屏还是横屏宽度都是ideal viewport的宽度
同时存在width和initial-scale的时候，谁大就取谁
<meta name="viewport" content="width=device-width:initial-scale=1"/>
当ipad或者ipone的时候，inital-scale解决了问题，当windows phone的时候，device-width解决了问题。