在现代 Web 设计中，响应式设计已经成为了一种必需品。它可以帮助网站在不同的设备上展现出更好的适应性，从而提升用户体验。然而，在实际开发中，我们可能会发现网站在某些设备上会出现一些奇怪的问题，比如文字过小、布局混乱等等。这些问题往往都与 viewport 相关。
Viewport 是移动设备上一个虚拟的可视区域，Web 页面会被渲染到这个区域内。由于不同设备的尺寸和分辨率各异，因此需要针对不同设备设置不同的 viewport。而这时就要用到 viewport meta 标签了。
设置 viewport 的基本方式
在 head 中使用如下格式来添加 viewport meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
其中，content 属性中有两个值：width=device-width 和 initial-scale=1.0。前者表示将 viewport 的宽度设置为设备的宽度，后者表示初始缩放比例为 1。
在一些早期的手机浏览器中，viewport 是固定的，无法改变尺寸和比例。使用以上 meta 标签可以让页面适应设备的大小，并让用户可以自行缩放。
设置 viewport 的高级方式
除了基本方式，还可以使用更为复杂、精确的设置方式。对于需要定制化、个性化的页面设计来说，这些高级方式可能更具有实用价值。
设置 initial-scale 和 maximum-scale
initial-scale 告诉浏览器页面最初应该以多大比例显示。而 maximum-scale 属性会限制浏览器缩放的最大倍数：
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
上面的代码中，我们设定了初始缩放比例为 1，同时禁止了用户缩放。
支持不同屏幕宽度
在某些情况下，我们需要让页面在不同宽度的设备上呈现不同的样式。例如，在移动端和桌面端展现出不同的布局。
为此，我们可以使用 @media 查询，针对不同的设备宽度设置不同的 viewport。以下是一个示例：
<meta name="viewport" content="width=640">
<!-- 在屏幕宽度小于 640px 时 -->
@media only screen and (max-width: 640px) {
<meta name="viewport" content="width=device-width, initial-scale=1">
}在以上示例中，如果屏幕宽度小于等于 640 像素，则设置 viewport 的宽度为设备宽度，初始缩放比例为 1。
改变设备触发键盘弹起的方式
在 iOS 设备上，默认情况下点击输入框后会自动弹出键盘。如果页面中有 fixed 或 absolute 定位元素，则可能会导致页面被压缩。针对这种情况，可以使用 viewport-fit=cover 属性解决问题：
<meta name="viewport" content="width=device-width, viewport-fit=cover">
总结
Viewport 是响应式设计中必不可少的一个组成部分。通过设置 viewport meta 标签，我们可以让 Web 页面适应不同屏幕尺寸和分辨率，并提供更好的用户体验。在实际开发中，根据不同的需求设置不同的 viewport 可能比基本方式更具有实用价值
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651baaa595b1f8cacd34d518