必须组合使用 user-select: none 和 -webkit-touch-callout: none 等多前缀声明，且作用于纯展示元素、避开表单控件，才能跨平台禁用长按选中与系统菜单。
单靠 user-select: none 或 -webkit-touch-callout: none 中任意一个，都无法真正禁用长按选中文本和系统菜单——必须组合使用，且作用范围、声明顺序、元素类型都得卡准。
为什么 user-select: none 单独写没用
它只阻止文本被高亮选中，不干预系统级菜单弹出。iOS Safari 和 Android Chrome 在长按时会独立检测可交互语义（比如是否是链接、图片、带文字的块），哪怕文字不可选，菜单照弹。
- 加了
user-select: none仍弹“复制”“搜索”，大概率是因为漏了-webkit-user-select: none—— iOS Safari 只认这个前缀 -
<input>、<textarea></textarea>、[contenteditable]上该样式会被浏览器强制忽略，不是你写错了，是设计如此 - 父容器设了
user-select: none，子元素里的文本节点不会自动继承，必须直接作用于包裹文本的标签（如<p class="no-select"></p>）
为什么 -webkit-touch-callout: none 单独写也没用
它只在 iOS WebKit 内核中生效（Safari、微信、钉钉等），且仅控制「是否唤起原生调用菜单」，比如长按 tel: 链接时弹“拨打”按钮。对纯文本、“复制”“保存图片”这类菜单完全无效。
- 安卓 Chrome、Firefox、Edge 完全不识别这个属性
- 即使在 iOS 上，若元素没有 layout（比如没高度、没
display值），或缺少cursor: pointer/tabindex等可交互标识，也可能被忽略 - 值只能是
none或default，写成disable或off就失效
真正跨平台生效的最小 CSS 组合
要覆盖 iOS Safari、Android Chrome、微信 X5、华为/小米浏览器，必须同时声明全部前缀，且不能只写在 body 或 * 上——那会干掉 <input> 光标定位和富文本编辑能力。
.no-longpress {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
- 顺序建议把
-webkit-touch-callout放第一行，某些 iOS WebView 对它位置敏感 - 作用目标要精准：只加在图片容器、标题
<h2></h2>、卡片描述<p></p>这类纯展示区域，别碰表单控件 - 如果用了
pointer-events: none，记得它会同时禁掉click和touchend，不是“仅禁长按”
哪些地方最容易被忽略
最常翻车的不是写法错，而是上下文没对上：
-
<img>的alt文本在 iOS 上仍可能被高亮——得设alt=""或改用background-image - React/Vue 动态渲染的内容，如果 class 是 JS 注入的，CSS 规则可能因优先级或时机问题被覆盖
- 微信 X5 内核对 CSS 支持不稳定，
-webkit-touch-callout常被无视，必须加 JS 兜底：element.addEventListener('contextmenu', e => e.preventDefault()) - 所有这些手段都不防截图、录屏、DevTools 查看 network 请求——真要防图，得从服务端做权限控制或 canvas 渲染 + 水印
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
