如何禁止iOS端网页缩放？适配iPhone X及最新iOS系统

我之前也碰到过iOS Safari上这种网页能被整体拖拽、松开后回弹的问题，这确实是因为视口配置和触摸行为没有做正确限制导致的，主流网站都是通过简单的meta标签+CSS配置解决的，给你一套可行的方案：

1. 配置核心视口Meta标签 #

这是解决问题的关键，在HTML的<head>区域添加这个标签，直接限制缩放和视口行为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

每个属性的作用：

• width=device-width：让网页视口宽度完全适配设备屏幕宽度
• initial-scale=1.0：设置页面初始加载时的缩放比例为100%
• maximum-scale=1.0：禁止用户将页面放大超过初始比例
• user-scalable=no：完全禁用用户手动缩放页面的操作

2. 补充CSS优化触摸行为 #

如果设置了meta标签后还有轻微的拖拽回弹现象，加上以下CSS可以彻底解决：

html, body {
  overflow-x: hidden; /* 防止页面横向溢出引发的滚动拖拽 */
  touch-action: pan-y; /* 仅允许垂直方向的触摸拖拽，禁止水平拖拽和缩放操作 */
  height: 100%; /* 确保页面高度铺满视口，避免空白区域导致的误拖拽 */
}

可选：保留用户缩放功能的配置 #

如果你需要允许用户在必要时缩放页面（比如查看小字内容），可以调整meta标签，既限制无意义的整体拖拽，又保留合理的缩放范围：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">

这样用户最多可以放大到3倍，同时不会出现那种拖拽后回弹的异常行为。

内容的提问来源于stack exchange，提问作者Mumfordwiz