如何运用CSS的user-select属性提升移动端响应式的可读性？

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 控制，而非属性开关。