viewport meta标签是移动端网页适配的基础配置，通过设置不同的参数组合，可以控制页面在移动设备上的宽度、缩放比例和用户交互权限，直接影响用户的浏览体验。不同的项目类型需要搭配不同的viewport写法，下面逐一对比几种最常用的配置方案。
viewport meta标签的核心参数说明
viewport meta标签的完整语法格式如下，其中width、initial-scale、maximum-scale、minimum-scale、user-scalable是五个最常用的核心参数：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
各参数的含义如下：
- width：控制viewport的宽度，常见取值为device-width，表示viewport宽度等于设备屏幕宽度
- initial-scale：页面初始加载时的缩放比例，1.0表示不缩放
- maximum-scale：允许用户手动缩放的最大比例
- minimum-scale：允许用户手动缩放的最小比例
- user-scalable：是否允许用户手动缩放，取值为yes或no
最常用的三种viewport写法对比
写法一：标准响应式适配写法
这是目前最通用的写法，适用于同时适配移动端和PC端的响应式页面：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这种写法的特点是viewport宽度等于设备宽度，初始缩放比例为1，同时允许用户手动缩放页面。既保证了移动端页面的宽度适配，又保留了用户的缩放操作权限，符合大多数内容类网站的需求。
写法二：禁止缩放的移动端专属写法
适用于纯移动端开发的页面，比如移动端H5应用、小程序内嵌页面等场景：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这种写法在基础配置上增加了最大缩放比例限制和禁止用户缩放的设置，避免用户误操作缩放页面导致布局错乱，适合交互元素较多、布局固定的移动端页面。
写法三：固定宽度适配写法
适用于早期的移动端页面开发，或者需要固定布局宽度的特殊场景：
<meta name="viewport" content="width=750, initial-scale=0.5">
这里width直接设置为设计稿的宽度750px，初始缩放比例设置为0.5，相当于把750px宽的设计稿完整显示在375px宽的手机屏幕上。这种写法现在已经逐渐被响应式方案替代，仅用于部分特殊需求的旧项目。
三种写法的效果对比
以下是三种写法在不同维度的对比情况：
| 写法类型 | viewport宽度 | 初始缩放 | 用户可缩放 | 适用场景 |
|---|---|---|---|---|
| 标准响应式写法 | 设备宽度 | 1.0 | 是 | 响应式网站、内容类页面 |
| 禁止缩放写法 | 设备宽度 | 1.0 | 否 | 纯移动端H5、交互类页面 |
| 固定宽度写法 | 固定值（如750px） | 自定义比例 | 默认是 | 旧项目、固定设计稿宽度的页面 |
写法选择建议
如果是开发需要同时适配多端的响应式页面，优先选择标准响应式写法，兼顾适配效果和用户体验。如果是纯移动端的业务页面，比如表单页、操作类H5，可以选择禁止缩放的写法，避免用户缩放破坏布局。固定宽度写法仅建议在维护旧项目或者有特殊设计需求时使用，新项目不推荐采用。
在实际开发中，还需要注意部分安卓设备对viewport参数的兼容差异，比如部分低端机型可能会忽略user-scalable的设置，此时可以搭配额外的JS逻辑做兼容处理，确保页面显示效果符合预期。