响应式Web设计-viewport

什么是viewport?

viewport是指用户网页的可视化区域
手机浏览器是把页面放在一个虚拟的窗口(viewport)中，通常这个窗口比手机屏幕宽，这样就不会让网页挤在一个很小的窗口中了，不过会破坏没有针对手机浏览器优化的网页的布局，用户可以通过放大和缩小来查看网页内容。

设置viewport

常见的viewport的meta标签如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width: 控制viewport的大小，可以设置具体的值，如600，也可以指定特殊的值，如device-width，它表示设备的宽度(单位为缩放为100%的css的像素)。
• height：和width相对应，指定viewport的高度。
• initial-scale：初始缩放比例，即页面第一次load的时候的缩放比例。
• maximum-scale：允许用户缩放的最大比例。
• minimum-scale：允许用户缩放的最小比例。
• user-scalable：用户是否可以手动缩放。