viewport meta标签用于控制移动端浏览器的视口行为，直接影响页面的布局宽度、缩放规则，是响应式开发的基础配置。不同的写法会导致页面在不同设备上呈现完全不同的效果，开发者需要根据业务场景选择适配方案。
常见的viewport meta标签写法
1. 基础适配写法
这是移动端开发中最常用的写法，也是多数框架默认推荐的配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
该写法的核心参数含义如下：
- width=device-width：将布局视口的宽度设置为设备的理想视口宽度，避免浏览器默认使用980px的布局视口导致页面被缩小
- initial-scale=1.0：设置页面初始缩放比例为1，即不缩放显示
2. 禁止用户缩放的写法
部分固定布局的页面需要禁止用户手动缩放，写法如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
新增的两个参数作用：
- maximum-scale=1.0：限制页面最大缩放比例为1
- user-scalable=no：禁止用户通过双指手势缩放页面
3. 固定布局视口宽度写法
部分老项目或者固定宽度的移动端页面会指定固定视口宽度：
<meta name="viewport" content="width=375, initial-scale=1.0">
这种写法直接将布局视口宽度固定为375px，不考虑不同设备的实际宽度，仅适合特定尺寸的设备适配。
不同写法对设备的影响对比
我们通过实际测试不同设备下的表现，总结如下对比结果：
| 写法类型 | 手机设备（理想视口375px） | 平板设备（理想视口768px） | PC设备（视口1200px） |
|---|---|---|---|
| 基础适配写法 | 布局视口375px，页面1:1显示，无缩放 | 布局视口768px，页面1:1显示，无缩放 | 布局视口1200px，页面1:1显示，无缩放 |
| 禁止缩放写法 | 布局视口375px，用户无法缩放页面 | 布局视口768px，用户无法缩放页面 | 布局视口1200px，用户无法缩放页面 |
| 固定宽度写法 | 布局视口375px，页面1:1显示 | 布局视口375px，页面两侧留白 | 布局视口375px，页面居中显示，两侧留白 |
推荐写法选择建议
大部分响应式项目优先选择基础适配写法，能够自动适配不同设备的理想视口，同时允许用户缩放提升无障碍体验。如果是固定布局的移动端活动页，需要禁止缩放避免布局错乱，可以选择禁止用户缩放的写法。固定宽度写法仅适合明确只适配特定尺寸设备的项目，不推荐通用项目使用。
注意事项
需要注意viewport标签的参数设置错误会导致常见问题：如果只设置initial-scale=1.0不设置width=device-width，部分安卓设备仍然会使用默认980px布局视口，导致页面被缩小。如果设置user-scalable=no，会影响视力障碍用户的浏览体验，除非必要场景不建议开启。
在实际开发中，还可以通过minimum-scale参数设置最小缩放比例，不过多数场景下不需要额外配置该参数，基础参数已经能满足大部分适配需求。