user-select: none不能提升可读性，反而破坏可访问性和基础交互；它仅适用于按钮标签、状态徽标等视觉似文本但语义非文本的元素，需配全前缀及-webkit-touch-callout: 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 上仍会弹出复制气泡；安卓微信则必须搭配 JS 拦截 touchstart，否则无效。
移动端真正影响可读性的 CSS 设置
想让文字在小屏上更易读，优先调这些：
-
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 控制，而非属性开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
