必须用 -webkit-tap-highlight-color: transparent 关闭 iOS 和微信点击高亮，且仅对可激活元素生效；禁用后需主动添加 :active 反馈，并注意 dvh 替代 vh 避免滚动条。
怎么关掉 iOS 和微信里点击按钮的灰蓝高亮
只写 outline: none 或 :active { opacity: 0.8 } 没用，高亮是 WebKit 渲染层独立绘制的 overlay，和伪类、边框、阴影完全无关。必须用 -webkit-tap-highlight-color: transparent 显式关闭。
但这个属性有硬限制：
- 只对可激活元素生效：比如
a、button、input[type="button"]、带role="button"[tabindex="0"]的div；不能写在body或*上，某些微信 X5 内核会白屏 - 值只能是
transparent或rgba(0,0,0,0)；写成none、unset、rgba(255,255,255,0)全部无效 - 不继承、不支持伪类，
a:active { -webkit-tap-highlight-color: transparent }是废的 - Android Chrome 62+ 已彻底忽略它，真机测不出效果，大概率不是你代码错，而是浏览器不支持
推荐写法：
code>a, button, input[type="button"], input[type="submit"], [role="button"][tabindex="0"] { -webkit-tap-highlight-color: transparent; }
为什么禁用高亮后按钮点下去像没反应
关掉系统高亮只是移除了干扰层，不是给了你反馈——:active 在 iOS 上持续时间极短（约 100–200ms），且有明显延迟，肉眼几乎不可见。别指望它替代高亮。
更稳的做法是主动补反馈：
- 给按钮加
:active { transform: scale(0.98); }或background-color: #e9ecef; - 如果用
div模拟按钮，除了-webkit-tap-highlight-color: transparent，还得加cursor: pointer和role="button"，否则屏幕阅读器可能跳过 - 动态渲染的按钮（如 Vue
v-if、ReactuseState）要确认role和tabindex同步存在，否则高亮会重新出现 - iOS 15.4+ 单独设
transparent可能残留微弱灰白闪烁，得配合user-select: none才算干净；但含电话、地址等需复制内容时，要用包裹并单独设user-select: text
怎样让页面不出现意外滚动条
滚动条不是“多出来”的装饰，是内容真实溢出视口的信号。直接在 body 上写 overflow: hidden 很危险——底部按钮、弹窗遮罩、键盘唤起后的内容都可能被裁掉。
先排查真实溢出原因：
-
html和body默认有margin和padding，哪怕内容空，也可能触发垂直滚动条 -
height: 100vh在 Safari 和部分安卓 WebView 中，会把地址栏高度算进vh，导致实际可用空间小于声明值 - Flex/Grid 容器设了
min-height: 0或子项用了flex-shrink: 0，容易撑破父容器 - 表单控件（如
input、textarea）在 iOS 上默认有内边距和最小尺寸，叠加后容易溢出
稳妥方案是分两步：html, body { margin: 0; padding: 0; } 清除默认值；再用 min-height: 100dvh（不是 100vh）替代，dvh 是设备视口单位，Safari 和新安卓浏览器都支持，能准确反映可滚动区域高度。
滚动条要不要彻底隐藏
用 overflow: hidden 强制藏滚动条，等于默认用户永远不需要滚动——这在表单页、长列表、弹窗内容里极其危险。更合理的是控制它的出现时机：
- 对固定区域（如抽屉菜单、图片预览框）用
overflow: hidden安全，因为内容高度可控 - 对整页或主内容区，优先用
overflow: auto，只在内容真溢出时才显示滚动条 - 想视觉上“去滚动条”但保留滚动能力？可以用
::-webkit-scrollbar { display: none; }，但这只对 WebKit 有效；iOS Safari 不支持该伪元素，所以别依赖它 - 如果必须定制滚动条样式，
::-webkit-scrollbar-thumb和::-webkit-scrollbar-track只影响外观，不影响是否可滚动
真正容易被忽略的是：高亮和滚动条都不是孤立问题。禁用高亮后没补反馈，用户会怀疑点没点中；强行压平滚动条后内容被裁，用户会找不到关键操作入口——它们都指向同一个底层逻辑：你得清楚自己在替系统接管什么，以及接管之后有没有真正兜住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
