什么是 Viewport?
Viewport 是一个用于在各种设备（如手机、平板电脑、桌面等）上创建和渲染 Web 页面的容器。在设计和开发响应式网站时，Viewport 非常重要，因为它定义了网页的可视区域，即用户在设备屏幕上可以看到的内容。
Viewport 的宽度和高度可以由开发者进行设置，这样他们就可以控制网页在不同设备上的布局和缩放。一般来说，桌面电脑的 Viewport 尺寸为 1024*768px，而手机设备的 Viewport 尺寸则可能只有 320*568px。
为了在不同的设备上提供更好的用户体验，开发者可以使用 Viewport 标签或者相关的 CSS 设置来控制页面在不同设备上的布局和缩放。例如，可以设置 Viewport 的宽度和高度，调整页面元素的布局和位置，或者禁用用户对页面的缩放等。
总之，Viewport 是 Web 设计和开发中一个重要的概念，它允许开发者在不同设备上创建和渲染 Web 页面，并控制页面的布局和缩放，以提供更好的用户体验。
设置 Viewport
设置Viewport可以通过在HTML文档的标签中添加标签来实现，例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
其中，name属性指定了viewport的值，content属性则用于设置viewport的参数。
在content属性中，可以设置以下参数：
- width：设置Viewport的宽度。可以指定具体的像素值，例如width=320，或者使用设备宽度，例如width=device-width。
- height：设置Viewport的高度。一般不进行设置，因为Viewport的高度通常由内容决定。
- initial-scale：设置页面的初始缩放比例。例如，initial-scale=1.0表示页面在加载时的初始缩放比例为100%。
- minimum-scale：设置页面的最小缩放比例。例如，minimum-scale=0.5表示用户可以将页面缩小到原始尺寸的50%。
- maximum-scale：设置页面的最大缩放比例。例如，maximum-scale=2.0表示用户可以将页面放大到原始尺寸的200%。
- user-scalable：设置页面是否允许用户进行缩放。例如，user-scalable=no表示禁止用户对页面进行缩放。
在上面的例子中，width=device-width表示将Viewport的宽度设置为设备的宽度，initial-scale=1.0表示页面在加载时的初始缩放比例为100%，user-scalable=no表示禁止用户对页面进行缩放。这样的设置可以帮助开发者更好地控制页面的布局和缩放，以提供更好的用户体验。
示例
1，没有添加 viewport
如果网页没有添加 viewport，那么网页的宽度将默认为980px，这可能会导致网页在移动设备上的显示出现问题，因为移动设备的屏幕宽度通常比桌面电脑小。
以下是一个没有添加 viewport 的示例：
<!DOCTYPE html>
<html>
<head>
<title>没有添加 viewport 的示例</title>
</head>
<body>
<h1>这是一个没有添加 viewport 的示例</h1>
<p>这个页面的宽度默认为 980px，可能会导致在移动设备上的显示出现问题。</p>
</body>
</html>
在上面的示例中，网页的宽度默认为980px，这可能会导致在移动设备上的显示出现问题。如果用户将浏览器窗口缩小到小于980px的宽度，那么网页的内容将被裁剪或者出现水平滚动条。
为了解决这个问题，开发者应该添加 viewport，并使用适当的参数来控制页面的布局和缩放，以提供更好的用户体验。
2，添加 viewport
如果网页添加了 viewport，那么网页的宽度可以自适应设备的宽度，这可以让网页在移动设备上的显示更加友好。
以下是一个添加 viewport 的示例：
<!DOCTYPE html>
<html>
<head>
<title>添加 viewport 的示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body>
<h1>这是一个添加 viewport 的示例</h1>
<p>这个页面的宽度可以自适应设备的宽度，让在移动设备上的显示更加友好。</p>
</body>
</html>
在上面的示例中，添加了 viewport，并将宽度设置为设备的宽度（width=device-width），初始缩放比例设置为100%（initial-scale=1.0），并禁止用户进行缩放（user-scalable=no）。这样的设置可以让网页在移动设备上的显示更加友好，让用户更方便地查看和操作网页内容。