当我们的浏览器在窗口最大化的时候，此时屏幕的宽度，就是我们桌面的分辨率。这个规则仅仅适用于PC！
我们试图在iPhone中输出屏幕宽度，你会发现屏幕宽度是980！居然和PC屏幕差不多大！
苹果主导的这些手机厂商，为了使用户获得完整web体验（就是让用户在手机屏幕上，也能够看见完整的PC网页），
就大部分设备都会欺骗浏览器返回一个数值较大的“视口”(viewport)，告诉浏览器，别以为我身子小，
但是我想以980px宽度来显示这个页面。
iPhone的分辨率1136*640，三星Note3的分辨率1920*1080。但是分辨率和视口没有关系。他们的视口都是980px。
也就是说说，一个width值为980px的盒子，能够在这样的手机中撑满整个页面，并且恰好不出现横向滚动条。
视口对于我们实现响应式是很不方便的。980太大了，不符合我们心中的期待。
我们心中认为手机屏幕尺寸应该小300~400之间。
约束视口。
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
name="viewport" id="viewport" />
一个id和name为viewport 的meta元标记，就表示现在要约束视口了。具体约束规则，写在content中，每个约束规则，用逗号隔开。
width=device-width → 命令视口的宽度，变为设备的宽（以1024*768屏幕为标准。iPhone等手机通常为320~380之间不等）
initial-scale=1.0 → 命令视口默认的缩放等级为1
minimum-scale=1.0 → 命令视口最小缩放等级为1
maximum-scale=1.0, → 命令视口最大缩放等级为1
user-scalable=no → 不允许用户缩放页面
加上了meta视口约束标记之后，iPhone的视口宽度就是320px。
所有的手机响应式界面，都要记得加上meta viewport视口约束标记！！！