先说一个相当核心的判断：user-select: none 这件事，非但提升不了可读性，反而是在亲手破坏可访问性，而且对基础交互打击不小。它真正的用武之地其实非常窄——只适合那些看着像文字、但语义上根本不是文本内容的视觉元素，比如按钮上的标签、状态徽标、以及某些图标文字。区域之外的地方，慎之又慎。
user-select: none 不能提升可读性，反而会破坏可访问性和基础交互 —— 它只该用在明确不需要文本操作的视觉元素上，比如按钮标签、状态徽标、图标文字。
为什么加了 user-select: none 反而让移动端更难读
可读性的基础从来不是“能不能随便选中”，而是字体本身的清晰度、对比度、行高、间距这些实打实的排版要素。如果单纯为了阻止用户选中文字，就给正文段落、列表项、乃至整个 .menu 容器一刀切地加上 user-select: none，那后果往往比预想严重得多。
- 在 iOS Safari 上，长按没法唤起“查找”功能了。用户想定位某句话时，功能彻底失效。
- 安卓微信里，部分机型会直接忽略这个声明，但更坑的是，有些会触发 X5 内核的异常聚焦逻辑。
- 屏幕阅读器或语音输入工具，可能误判该内容为“非文本”，干脆跳过朗读。
- 复制关键信息，比如电话号码、地址，一下变得十分困难。这对老年或视障用户来说，几乎就是硬伤。
哪些地方真该用 user-select: none（且必须写全前缀）
适用范围非常狭窄，仅限于“视觉上像文字，但语义上不是文本内容”的元素。比如：
- 带
role="button"的span，典型的就是 Tab 标签页上的文字：.tab-label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - 使用
::before插入的图标文字（如状态 badge），重点在于：声明必须加在宿主元素上，而不是伪元素本身。 - 卡片标题旁的“已读”小徽标：
.chip-text { user-select: none; }
关键提醒：这些场景如果漏掉了 -webkit-touch-callout: none，iOS 上照样会弹出复制气泡。至于安卓微信，单靠 CSS 还不行，必须搭配 JS 去拦截 touchstart 事件，否则仍无效。
移动端真正影响可读性的 CSS 设置
想让文字在小屏幕上读起来更舒服，优先优化的是下面这几个，远比折腾 user-select 实际得多：
font-size尽量用rem或vw做响应式缩放，别再用固定px。line-height设为无单位值（比如1.6），确保能随字号自适应。color和背景色的对比度，至少得 ≥ 4.5:1（可以用 Lighthouse 检测一下）。- 禁用
user-zoom: none或maximum-scale=1.0—— 这些 meta 设置对可读性的伤害，远比 CSS 更直接。
容易被忽略的继承与重置陷阱
话说回来，继承陷阱是这个属性最容易翻车的地方。一旦在根容器（比如 body）设了 user-select: none，所有子元素都会被继承。有意思的是，input、textarea、[contenteditable] 会无视它、照常工作，而 button 和链接却会乖乖继承——结果就是点击反馈出现异常，或者光标无法正常定位。
必须针对这些元素做显式重置：
input, textarea, select, button, [contenteditable="true"] {
user-select: text;
}
另外值得注意，React/Vue 动态渲染的菜单项如果用了 contenteditable="false"，反而可能触发 Safari 的 focus 异常。这类场景，优先用 CSS 控制，而不是靠属性开关去硬解。
