移动端图片长按缩放是 Safari 渲染层策略，需同时设置 -webkit-touch-callout: none、-webkit-user-select: none 和 -webkit-tap-highlight-color: rgba(0,0,0,0) 才能彻底禁用，并确保 img 有明确宽高或使用 background-size: contain 防异常缩放。
移动端点击图片自动放大是 Safari 的默认行为
iOS Safari（包括微信内置浏览器）在用户长按图片时，会触发系统级的「保存图片」「复制链接」等菜单，同时默认伴随一次瞬时缩放动画——这不是 bug，而是 WebKit 的 -webkit-touch-callout 和 -webkit-user-select 联合作用的结果。很多开发者误以为是 JS 干扰或 CSS 冲突，其实根源在渲染层策略。
禁用 callout 同时必须处理 user-select 和 tap-highlight
只设 -webkit-touch-callout: none 不够，它只隐藏右键菜单，但长按仍会触发缩放。真正要阻断整个交互链，需三者协同：
-
-webkit-touch-callout: none：移除长按弹出菜单 -
-webkit-user-select: none：禁止选中文本/图片（否则 Safari 会尝试高亮区域并缩放） -
-webkit-tap-highlight-color: rgba(0,0,0,0)：消除点击高亮反馈（部分机型缩放由该高亮触发）
推荐写成组合声明，避免漏配：
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
注意 img 标签的 width/height 是否被重置
如果图片本身没有明确尺寸（比如仅靠 max-width: 100% 布局），Safari 在禁用 callout 后可能因内部渲染逻辑变化，导致图片临时“失焦”而缩放异常。务必确保：
- 所有
<img>元素至少有width或height之一为固定值（如height: auto） - 避免仅依赖
object-fit+width: 100%且无父容器约束 - 若用
background-image替代<img>，同样要加background-size: contain防止拉伸触发缩放
微信 WebView 下的额外限制
微信 iOS 客户端（8.0.30+）对 -webkit-touch-callout 的拦截更激进，有时即使样式生效，双击仍可能放大。此时需补充 JS 层防御：
document.addEventListener('touchstart', function(e) {
if (e.target.tagName === 'IMG') {
e.preventDefault();
}
}, { passive: false });
⚠️ 注意：passive: false 必须显式声明，否则 iOS Safari 会忽略 preventDefault；且该监听不能绑定在 body 上，需委托到具体图片容器，否则影响页面滚动。
最易被忽略的是：这些样式必须作用于实际渲染的 <img> 元素本身，而不是其父容器。用伪类或 scoped CSS 时，检查最终生成的选择器是否精确命中 img 标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
