几乎所有移动端页面都会添加这个标签：
但以下问题可能会让人疑惑：
- device-width在不同设备中的值是一样的么？
- width=700, initial-scale=0.5时，页面的实际宽度是多少？横纵屏幕转换时会发生怎样的变化？
- 去掉initial-scale=0.5，或者去掉width=700，行为会有怎样的不同？
本文将解释这些问题，并阐述viewport标签的三层含义，在结尾会给出总结。
viewport与scale
为便于理解，我们不搞复杂定义，直接用数据实例来解释，以iPhone4为例。
viewport：
当viewport=500时，浏览器画布宽度为500px，在这个页面调用 $("body").width()会得到“500”。
scale：
当scale=1时，设备纵向，屏幕宽度能容纳320px，设备横向，屏幕宽度能容纳480px。
当scale=0.5时，设备纵向，屏幕宽度能容纳640px，设备横向，屏幕宽度能容纳960px。
当屏幕宽度能容纳的像素数小于画布宽度时，拖动页面就会出现滚动条，如下：
viewport与scale的相互关系
虽然viewport与scale在一个meta标签里面定义，但实际上他们是独立的两个属性。
从概念上画布有多少像素和屏幕能容纳多少像素没什么关系，它们共同决定了当前页面的显示状态。
但是，令人疑惑的是，viewport与scale确实会相互影响。
因为以下一种情况：
width=320, initial-scale=0.5
scale=0.5, 屏幕宽度能容纳640px，但是viewport只有320px，也就是说，在这种设置下画布铺不满屏幕。
这种情况，现在的浏览器一般都是不允许的。
为了保证画布铺满屏幕，我们就需要viewport与scale这两个值相互配合。
viewport与scale的自动调整
我们的浏览器会自动调整viewport与scale来使画布铺面屏幕，所以他们的实际值不一定是你在标签中设置的值。
下面举例说明自动调整是如何进行的。
若initial-scale为空,只设置viewport宽度，
例如：
当初始化或横纵翻转时，viewport不变，调整scale使画面填满屏幕宽度。
在这种情况下，横屏并并不会增加页面宽度，页面只是会放大。
若initial-scale非空
例如：
当初始化或横纵翻转时，scale不变，若viewport不足以填满屏幕宽度，则改变viewport以填满屏幕宽度。
关于默认设置
浏览器的默认设置：
viewport=980，initial-scale为空，
默认设置下，980的画布宽度已经接近于PC了，而且画布不会因为横屏而变宽，只是放大。
这种设置是为了兼容PC页面，可以想象一个未经优化的PC页面的宽度变为320px时会有多么支离破碎。
值得一提的是，虽然iPhone4的屏幕宽度已经有640px，但是浏览器实现的还是device-width=320，这样曾经为320宽度优化的移动页面不至于新型手机宽度的增加而面目全非。
回到最初
这个标签背后的三层含义：
1. 尺寸
我的页面是经过移动设备优化的，在画布很小（比如只有320px）的情况下依然能够正常显示。
2. 缩放
我希望我的页面在初始状态下不经过手动缩放就可以刚好占满整个屏幕。屏幕中各元素的不经过手动缩放就能够正常辨识并使用。
3. 响应
横屏时，我希望画布可以放大，因为我的页面是响应式的，在更大画布中有着不同的展现。
如果你的页面不符合以上三点中的任意一条，那么不要使用这个标签，因为不符合实际的声明只会破坏页面在移动环境中的表现。
希望有更多的页面带有这个经典的标签，并且真正实现了它的含义。
