挪动端页面人人都遇到过 viewport 的题目。关于 viewport 的文章有许多了，推荐给人人这两篇，写得异常细致。
挪动端适配计划(上)
挪动端适配计划(下)
本文对 viewport 做一些补充
手机屏幕
手机屏幕属于硬件属性，我们无论是经由过程 JS 照样 meta 标签都是没法影响到它的。
手机屏幕物理像素，也就是手机厂商们说的像素、分辨率、PPI这些。
安卓罕见的有 720X1280 , 1080X1920 等等
iPhone 则是 iPhone5 640X1136，iPhone6 750X1334，iPhone6P 1080X1920
手机屏幕逻辑像素，物理像素经由折算以后的像素数。也就是抱负视口的尺寸
iPhone5 屏幕本来是 640px 宽，然则折算成了 320px
iPhone6 物理像素 750px 款，折算成 375px
iPhone6P 稍微奇葩一点，物理像素现实 1080px 宽，然则体系向外暴露的确是 1242px，再折算成了 414px
screen.width/height 能够猎取屏幕的逻辑像素
规划视口 layout viewport
适才讲过的屏幕物理像素和逻辑像素，这些都是手机厂商设置好的，我们是没法设置的，重点再与接下来的两个视口，人人千万别殽杂了。
layout viewport 相当于浏览器的宽度。
我们是能够经由过程 <meta name=”viewport” content=”width=XXX”>设置的。
默许情况下，layout viewport 平常为 980px 宽。
document.documentElement.clientWidth 能够猎取 layout viewport 的宽度。
视觉视口 visual viewport
视觉视口能够看做是手机屏幕这么大的一个窗口，然则它能显现的像素个数却不是屏幕上面的这么多逻辑像素。
视觉视口不太轻易明白，虽然手机屏幕的逻辑像素已牢固了，比方 iPhone5 是 320px。
然则屏幕这 320px 宽，却能够显现 980px 宽的内容，所以视觉窗口的宽度是 980px。
许多没有对挪动端做适配的网页，我们用手机翻开，发明网页被缩小到手机屏幕这么宽了。
重点就在于缩放，缩放让320px的屏幕能显现更多内容了。window.innerWidth 能够猎取 visual viewport 的宽度。
经由过程 <meta name=”viewport” content=”initial-scale=x”> 能够设置 visual viewport 的宽度。
visual viewport 的宽度为 screen.width / initial-scale
同时，也会影响到 规划视口 的宽度，由于规划视口的宽度一直大于即是 visual layout 的宽度。
假如不设置 initial-scale ，iOS装备会自动将 visual viewport 缩放到 规划视口一样大。还记得默许的 规划视口 是多宽吗？
屏幕逻辑像素、规划视口、视觉视口 三者的关联
<meta name=”viewport” content=”width=device-width”>
将 layout viewport 的宽度设置为 屏幕宽
<meta name=”viewport” content=”width=640″>
将 layout viewport 宽度设置为 640px （逻辑像素，而不是物理像素）
<meta name=”viewport” content=”initial-scale=0.5″>
将 visual viewport 设置为 屏幕宽度的 2 倍（准确的明白是：visual viewport 的 0.5 倍是屏幕宽度，所以 visual viewport 的宽度就是屏幕的2倍了）
此时 规划视口的宽度也是 屏幕宽的2倍，而不再是默许的 980px 了
总结：
1、默许情况下 layout viewport 为 980px
2、width=x 设置规划视口，initial-scale=y 设置视觉视口
3、假如只设置 规划视口 和 视觉视口 中的一个，那末另一个也是一样的宽度
4、规划视口 的宽度一直大于即是 视觉视口举例 iPhone 5 上面
<meta name=”viewport” content=”width=600,initial-scale=0.5″>
那末视觉视口和规划视口分别是多宽呢？
末了的末了，终究到了我们耳熟能详的
<meta name="viewport" content="width=device-width,initial-scale=1.0">人人晓得这是什么意思了吧。
layout viewport 浏览器窗口，设置为屏幕宽度。
visual viewport 也设置为屏幕宽度，不缩放，屏幕有多宽，就显现若干像素。
也就是所谓的圆满视口。
