什么是Viewport
在显示面积上手机屏幕相对桌面显示器要小很多，在几年前(现在也如此)大部分网站都是为桌面显示器浏览而设计，很少考虑到适应手机屏幕，所以如果用手机浏 览大多网站时会出现问题，比如常见固定宽度的网页会出现横向竖向滑动条，当然这不算什么大问题；但如果是浏览流动布局的网页那情况会非常糟糕，设想一个宽 度为30%的侧边栏对于320px手机屏幕而言也就96px，只能容纳8个12px的汉字，可阅读性非常差。为了让手机也能获得良好的网页浏览体验，Apple找到了一个办法：在移动版(iOS)的Safari中定义了viewport meta标签①，它的作用就是创建一个虚拟的窗口(viewport)，而且这个虚拟窗口的分辨率接近于桌面显示器，Apple将其定位为980px②。以一代iphone下的Safari来说就是：在iphone的320px物理屏幕上——视觉窗口(visual viewport)，创建出了一个980px的虚拟窗口——布局窗口(layout viewport)，在视觉窗口(visual viewport)中我们可以拖动横向竖向滑动条或者放大缩小网页，来达到最佳的浏览效果(类似桌面浏览器)；而布局窗口(layout viewport)用来配合CSS渲染布局，例如当我们设置一个容器的宽度为100%时，这个容器的实际值为980px而不是320px。如此一来大部分 网页就能以缩放的形式正常的显示在手机屏幕上了。 在显示面积上手机屏幕相对桌面显示器要小很多，在几年
