Viewport是浏览器中显示网页内容的区域，通过设置viewport，可以控制网页在不同设备上的缩放和尺寸。Viewport的常见设置主要包括以下几个方面：
width：设置viewport的宽度。这个值可以是一个具体的像素值，如width=980，表示将viewport宽度设置为980像素；也可以是特殊的值，如“device-width”，表示设备的屏幕宽度。使用“device-width”可以确保网页的宽度与设备的屏幕宽度相匹配，从而避免水平滚动条的出现。
initial-scale：设置网页首次加载时的缩放比例。这个值是一个数值，表示相对于原始大小的缩放倍数。例如，1.0表示不缩放，即按照原始大小显示；0.5则表示页面内容缩小到原始大小的一半。
maximum-scale：设置用户允许缩放的最大比例。这个属性可以防止用户过度放大网页，从而保持网页的布局和可读性。
minimum-scale：设置用户允许缩放的最小比例。这个属性可以防止用户过度缩小网页，导致内容难以阅读。
user-scalable：设置是否允许用户手动缩放网页。这个属性可以接受两个值：“yes”或“no”。如果设置为“no”，则用户无法通过手势或浏览器控件来缩放网页。这有助于保持网页的布局稳定性，但也可能限制用户的交互体验。
viewport-fit：控制视口如何适应设备的“安全区域”（safe area），例如iPhone X及更高版本带有“刘海”的设备。其取值包括：
- contain（默认值）：视口内容被包含在安全区域内，可能会出现空白区域。
- cover：视口内容覆盖整个屏幕，包括安全区域之外的区域，内容可能会被刘海或底部Home Indicator遮挡。
- auto：与contain相同。
一个典型的viewport meta标签设置如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这个设置告诉浏览器viewport宽度应与设备宽度匹配，初始缩放比例为1.0，并且允许用户缩放页面。这是大多数响应式网站推荐的设置。
在实际开发中，可以根据具体需求组合使用这些设置。例如，如果希望网页在不同设备上都能正确显示，并且不允许用户缩放，可以这样设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
但请注意，禁用用户缩放可能会影响用户体验，因此应谨慎使用。
