用CSS user-select属性提升移动端响应式可读性

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 控制，而不是靠属性开关去硬解。