找了很多资料，解释起来都很费劲和复杂。
现在看我这个。
拿 iPhone 举例。iPhone 创建出了一个 980px 的虚拟窗口——布局窗口（layout viewport）来对页面布局，这时传统的桌面端网页终于能正常布局了（虽然要放大才能看清），但正是这个 layout viewport 导致专门根据屏幕尺寸和 devicePixelRatio 优化过的页面也只能以缩放的方式显示（可以想象在你的 PC 浏览器宽 980px 窗口里打开一个 320px 的页面的情景...），那么为了让为移动设备优化过的网页正常显示，就要改变这个 layout viewport。
也正是 <meta name="viewport" content="width=device-width, initial-scale=1 /> 这句话的作用。
