user-select: none 在 iOS Safari 和 Android Chrome 上仅部分生效，主要阻止主动选中但不禁止焦点、光标或 JS 强制选中，需配合 -webkit-user-select、HTML 优化及 JS 干预才能提升可靠性。
user-select: none 在移动端是否真的生效
在 iOS Safari 和 Android Chrome 上，user-select: none 大部分时候能阻止长按选中，但**不等于禁用所有文本交互**。它只影响用户主动触发的选中行为，对焦点、光标、可编辑区域（如 contenteditable）无约束力。
常见错误现象：加了 user-select: none 后，iOS 上仍能长按弹出“复制/搜索”菜单；Android 上双击文字偶尔仍会高亮——这通常是因为父级没生效、或被更具体的样式覆盖。
- 必须作用于实际文本容器（比如
、），而不是仅写在 body 或 wrapper 上 - 需配合
-webkit-user-select: none（iOS 旧版 Safari 必须） - 如果元素有
input、textarea或contenteditable="true"，该属性会被忽略
哪些场景下 user-select: none 会失效
它不是“全局锁”，而是 CSS 渲染层的提示。一旦 DOM 行为介入（比如 JS 主动 focus、selection API 调用），或浏览器策略干预（如可访问性模式），就可能绕过。
典型失效场景：
- 元素被设置为
tabindex="0"且获得焦点后，Android Chrome 可能允许双击选中 - 使用
window.getSelection().selectAllChildren()等 JS 方法仍可强制选中 - 开启系统级“辅助功能”（如 iOS 的“朗读内容”或“切换控制”）时，部分浏览器会忽略该声明
- 某些安卓定制 ROM（如小米 HyperOS）对
user-select支持不一致，需额外测试
比 user-select 更可靠的防选中组合方案
单靠 CSS 不够稳健，尤其在需要彻底屏蔽文本操作的业务场景（如防截图文案、答题卡禁选）。得叠加轻量 JS 干预。
推荐做法：
- CSS 层：同时写
user-select: none和-webkit-user-select: none - HTML 层：避免给非输入区域设
tabindex，移除onselectstart以外的冗余事件监听 - JS 层（谨慎使用）：监听
selectstart事件并event.preventDefault()，注意 iOS Safari 不触发该事件，需配合touchstart+preventDefault抑制长按
示例片段：
element.addEventListener('selectstart', e => e.preventDefault());
—— 仅对桌面和部分 Android 有效，iOS 需另加 touchstart 处理。
移动端适配时容易漏掉的兼容细节
不同 WebView 内核对 user-select 解析差异大，尤其是微信内置浏览器（X5）、QQ 浏览器（TRIDENT）、飞书/钉钉内嵌 WebView。它们可能完全忽略该声明，或只认 -webkit- 前缀。
- 微信 iOS 客户端（v8.0.4x+）已支持标准
user-select，但旧版本只响应-webkit-user-select - 安卓端 X5 内核需同时写
-webkit-user-select和user-select，否则可能 fallback 到默认行为 - 若页面启用
viewport的user-scalable=no，部分低端安卓机反而会增强文本可选性（反直觉但真实存在）
真正麻烦的是混合场景：既要防选中，又要保点击穿透、焦点管理、屏幕阅读器可用性——这时候删掉 user-select，改用视觉隐藏 + 语义化替代，反而更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
