Viewport（视口）是指网页浏览器中用于显示网页内容的可视区域。它决定了用户能够看到网页中的多少内容以及如何呈现。Viewport 的概念最早由苹果公司在 2007 年提出，并在移动设备上得到广泛采用。
在移动设备普及之前，网页设计主要考虑的是桌面电脑上的显示。但当移动设备出现后，屏幕尺寸和分辨率多样化，传统的固定布局方式无法适应不同设备的屏幕大小。例如，在引入 Viewport 之前，移动设备的浏览器通常会将整个网页缩放到适应屏幕宽度，这导致页面在小屏幕上显示过小，用户需要放大和滚动来查看内容，体验不佳。
<style>
body {
width: 980px; /* 固定宽度布局 */
margin: 0 auto; /* 水平居中 */
}
h1 {
font-size: 24px;
}
p {
font-size: 16px;
}
</style>
在这个例子中，网页使用了固定宽度布局，文本的字体大小也是固定的像素值。这种布局方式在移动设备上会导致页面显示过小，需要用户手动缩放和滚动来查看内容。
Viewport 的引入使得网页能够根据设备的屏幕宽度进行适配，并通过设置缩放比例来调整网页的显示比例。例如，通过 Viewport 的设置，网页可以使用相对单位（如百分比、em、rem）进行布局，而不是固定的像素值。这意味着网页中的元素和文本会根据屏幕宽度自适应调整大小和位置，使其在不同屏幕尺寸和分辨率下呈现出更好的可读性和可用性。
Viewport 还可以通过设置 initial-scale 属性来控制页面的初始缩放级别，以确保页面在打开时以适合屏幕的大小显示，避免过大或过小的显示。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
max-width: 100%; /* 使用相对单位 */
margin: 0 auto; /* 水平居中 */
}
h1 {
font-size: 4vw; /* 相对单位，根据视口宽度调整字体大小 */
}
p {
font-size: 2vw; /* 相对单位，根据视口宽度调整字体大小 */
}
</style>
在这个例子中，我们引入了 Viewport 的 meta 标签，并设置宽度为设备的宽度。同时，我们使用了相对单位（vw，即视口宽度的百分比）来定义文本的字体大小和布局的最大宽度。这样，在不同设备上，网页会根据视口宽度自动调整布局和字体大小，以适应不同的屏幕尺寸。
注意事项：
Viewport 的缺点是在某些情况下可能需要用户进行手动调整，因为一些网站可能没有正确设置 Viewport 或者设置不合理，导致页面显示异常。
- 不要硬编码固定的像素值，而是使用相对单位（如百分比、em、rem）进行布局。
- 考虑不同设备的屏幕尺寸和分辨率，进行适配和响应式设计。
- 对于移动设备，确保文本和元素足够大，方便用户在小屏幕上阅读和操作。
以下是一些相关链接，供进一步了解：
