本文章转载自博客园-无双，更加图文并茂
viewport的概念
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。
viewport来源于苹果，我们开发时一般会都是应用以下的一段代码
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
在苹果的规范中，meta的viewport中有以下属性:
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
|---|---|
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
以上这段代码是我们经常会用的移动web页面适配的代码，基本意思是：设置浏览器的宽度等于设备宽度，初始缩放比例1:1,最大缩放比例为1:1, 最小缩放比例为1:1,禁止用户缩放操作，然后勒，列举几个兼容性问题（主要针对安卓和ios）：
** PS **:说明一下“layout viewport” ,“visual viewport”, “ideal viewport”三者的区别
layout viewport是指浏览器的真实宽高，在未设置content的时候，一般会大于设备的宽，visual viewport为屏幕可见宽高，ideal viewport为开发时的理想宽高
设置content=''
即将设置为空,安卓和ios都会自我调节dpi(dots per inch)--每一英寸的点数,网页渲染宽度为屏幕宽度。
不设置viewport初始缩放比例 无论你设置viewport的port的width多宽，安卓和ios都会自动计算这个缩放值，以达到页面不出现滚动条的目的。
设置viewport的宽度content="width=device-width"
<meta name="viewport" content="width=device-width">
测试结果:在iPhone和iPad上，无论是横屏还是竖屏，宽度都是竖屏的ideal viewport的宽度，但是还有一句代码可以实现同样的效果，就是设置初始缩放比例
设置 <meta name="viewport" content="initial-scale=1">
这一句代码同样可以实现和设置为ideal viewport宽度同样的效果，即默认也会为设备的宽度，那么为什么会和上一个设置的效果一样呢?其实解释起来很简单，顾名思义，缩放就是相对屏幕的大小进行缩放，所以我们就得到了ideal viewport了，经测试：content="initial-scale=1"也可以将viewport设置为 ideal viewport,但是在window phone的ie浏览器上，无论是竖屏还是横屏，都把宽度设为竖屏时ideal viewport的宽度。
但如果width 和 initial-scale=1同时出现，并且还出现了冲突呢？比如：
<meta name="viewport" content="width=400, initial-scale=1">
width=400表示把当前viewport的宽度设为400px，initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度，那么浏览器到底该服从哪个命令呢？是书写顺序在后面的那个吗？不是。当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当width=400，ideal viewport的宽度为320时，取的是400；当width=400， ideal viewport的宽度为480时，取的是ideal viewport的宽度。（ps:在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）
最后，总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：
<meta name="viewport" content="width=device-width, initial-scale=1">
