Viewport 是指浏览器窗口中用于显示网页的区域，它决定了网页内容在浏览器中的显示方式。在移动设备上，Viewport 的尺寸通常比较小，因此需要通过 CSS 来控制网页在不同设备上的显示效果。
设置 Viewport
在移动设备上，为了确保网页能够正确显示，我们需要在 <head> 标签中添加以下 meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
上面的 meta 标签会告诉浏览器使用设备的宽度作为视口的宽度，并设置初始缩放比例为 1.0。这样可以确保网页在不同设备上以正确的比例进行显示。
Viewport 单位
在 CSS 中，我们可以使用 viewport 单位来定义元素的尺寸。viewport 单位是相对于视口的尺寸来进行计算的，常用的 viewport 单位有以下几种：
vw：视口宽度的百分比，1vw 等于视口宽度的 1%。vh：视口高度的百分比，1vh 等于视口高度的 1%。vmin：视口宽度和高度中较小的那个的百分比。vmax：视口宽度和高度中较大的那个的百分比。
通过使用 viewport 单位，我们可以实现响应式设计，使得网页在不同设备上能够自动适应屏幕尺寸。
示例代码
.container {
width: 50vw; /* 将容器的宽度设置为视口宽度的一半 */
height: 50vh; /* 将容器的高度设置为视口高度的一半 */
padding: 5vmin; /* 设置内边距为视口宽度和高度中较小的那个的 5% */
margin: 5vmax; /* 设置外边距为视口宽度和高度中较大的那个的 5% */
}以上是关于 Viewport 的一些基本知识和应用，通过合理地设置 viewport，我们可以实现更好的移动端网页显示效果。