什么是 Viewport ?

viewport 指代用户网页的可视区域。

没有平板和手机之以及一系列不同屏幕分辨率之前，网页设计的主要目的是用于电脑屏幕上进行展示，常常拥有静态的固定大小。

随着不同电子设备的普及，网页的展示也不仅仅限于固定的显示器屏幕，能适应多种设备展示成为一个很重要的需求。

为了解决这个问题，一个在HTML5中一个meta名称为viewport标签出现了。

设置 Viewport

HTML5 引入了一种方法，使 Web 设计者可以通过 <meta> 标签来控制视窗。

您应该在所有网页中包含以下 <meta> 元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。

下面两个示例展示了使用 viewport 和没使用 viewport 在移动端上的展示效果：

没有视口元标记

带有视口元标记

把内容调整到视口的大小

用户习惯在台式机和移动设备上垂直滚动网站，而不是水平滚动！

因此，如果迫使用户水平滚动或缩小以查看整个网页，则会导致不佳的用户体验。

还需要遵循的一些附加规则：

1. 请勿使用较大的固定宽度元素 – 例如，如果图像的宽度大于视口的宽度，则可能导致视口水平滚动。请务必调整此内容以适合视口的宽度。

2. 不要让内容依赖于特定的视口宽度来呈现好的效果 – 由于以 CSS 像素计的屏幕尺寸和宽度在设备之间变化很大，因此内容不应依赖于特定的视口宽度来呈现良好的效果。

3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 – 为页面元素设置较大的 CSS 绝对宽度将导致该元素对于较小设备上的视口太宽。而是应该考虑使用相对宽度值，例如 width: 100%。另外，要小心使用较大的绝对定位值，这可能会导致元素滑落到小型设备的视口之外。