ios safari 中 user-select: none 失效是因为目标元素需满足可交互或有明确尺寸/内容等前提，须配合 -webkit-user-select、min-height 等布局约束并作用于具体元素而非父级。
移动端长按触发文字选中，怎么用 CSS 禁掉
直接加 user-select: none 就行，但只写这一句在 iOS 上大概率失效——iOS Safari 对 user-select 的支持有严格前提。
为什么 user-select: none 在 iPhone 上不生效
iOS Safari 要求目标元素必须是「可交互的」或「有明确尺寸/内容」才能响应 user-select。空 <div>、未设宽高的容器、纯透明背景、或被 <code>pointer-events: none 拦截的区域，都会让该样式被忽略。
- 确保元素有明确
width和height（哪怕只是min-height: 1px） - 避免同时设置
pointer-events: none—— 它会覆盖user-select - 如果元素内含文本，需对文本节点父级设样式，而非仅对子
<span></span> - iOS 15.4+ 开始支持
-webkit-user-select: none，但依然要配合布局约束
user-select: none 的兼容写法和生效范围
只写标准属性不够，得补全前缀并作用到正确层级。它不会继承，所以不能只写在 body 或父容器上，得落到具体要禁选的元素上。
/* 推荐这样写 */
.text-block {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* 必须带 layout 触发 */
min-height: 1em;
line-height: 1.2;
}
- Android Chrome / Firefox 基本认
user-select: none，但加前缀更稳 - 不要对
<input>、<textarea></textarea>设这个——用户需要选中输入内容 - 如果用了
touch-action: manipulation，也要检查是否意外阻止了长按识别逻辑
替代方案：当 user-select 真的不生效时
真遇到极端情况（比如 Webview 内嵌、老版 iOS），可以靠 JS 拦截事件，但这是兜底手段，别默认用。
- 监听
touchstart并立刻event.preventDefault()，但会同时禁掉滚动 - 更安全的是监听
selectstart事件：element.addEventListener('selectstart', e => e.preventDefault()) - 注意：JS 方案无法阻止长按唤出系统菜单（如“复制”“搜索”），只能防止高亮；CSS 才是源头控制
真正难搞的不是写哪行代码，而是得确认那个元素在 iOS 里是不是“被当成可选区域”——有时候加个 outline: 0 或删掉 tabindex="-1" 反而就灵了。
