移动端reset需单独处理ios特有行为：-webkit-tap-highlight-color: transparent可关闭点击高亮，-webkit-appearance: none重置表单样式，font-size
移动端 Reset 不是直接套用 PC 端那一套就能跑通的，关键要解决 Safari/iOS 的特有行为——比如 tap 高亮、input 默认样式、字体缩放、retina 边框模糊等问题。直接复制通用 reset.css 很可能让按钮点不动、输入框变形、文字突然变大。
为什么移动端必须单独处理 -webkit-tap-highlight-color
iOS Safari 点击链接或可点击元素时会默认加一层半透明灰色遮罩，不是 bug，是系统级反馈机制。但多数 H5 页面已有自定义点击态，这个高亮就显得突兀甚至遮挡内容。
- 不设或设成
rgba(0,0,0,0)仅能隐藏视觉高亮，但部分老 iOS 版本（如 iOS 9）仍会触发短暂禁用:active状态 - 更稳妥的做法是：对所有可交互元素统一设
-webkit-tap-highlight-color: transparent;，同时确保a:active或button:active有明确的背景/颜色变化 - 注意：设为
transparent比rgba(0,0,0,0)兼容性更好，后者在 iOS 7–8 下可能失效
input 和 button 的 -webkit-appearance 必须重置
iOS 上 input[type="button"]、input[type="submit"] 默认带圆角、阴影和渐变，和设计稿差得离谱；textarea 在某些机型上还会自动放大字体。
- 统一加
-webkit-appearance: none;去除原生样式，再手动写圆角、边框、背景 - 特别注意
input[type="number"]：它自带上下小箭头（spin buttons），需额外加input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } - 如果用了
font-size: 16px以下的输入框，在 iOS 上可能触发「自动放大」，需配合html { -webkit-text-size-adjust: 100%; }禁用该行为
图片和容器的 max-width: 100% 不够，还得加 vertical-align
移动端图片常嵌在 inline-block 或文本流中，img 默认是 vertical-align: baseline，导致下方留白（约 4px），容器高度莫名多出一截。
- 只写
img { max-width: 100%; height: auto; }无法解决留白问题 - 必须补一句
img { vertical-align: middle; }或img { vertical-align: top; } - 若用
picture或svg替代img，同样要设vertical-align，否则布局错位依然存在
别忽略 box-sizing: border-box 的作用范围
PC 端 reset 常用 * { box-sizing: border-box; }，但在 iOS Safari 旧版本（iOS 5–6）里，这会导致 table、select 等元素渲染异常，甚至撑破父容器。
- 推荐写法：
*, *::before, *::after { box-sizing: border-box; }—— 更精确，且现代 iOS 已无兼容问题 - 但若项目还要支持 iOS 6，应改为只对常用块级元素设置：
div, section, article, header, footer, input, textarea, button { box-sizing: border-box; } - 切记：reset 文件里没写
box-sizing的话，后续所有 padding/border 都得手动换算，极其容易漏
真正麻烦的从来不是写几行 reset，而是某天测试发现 iPhone 上按钮点一下没反馈、输入数字时键盘弹出后页面被顶起、或者文字在 Safari 里突然放大——这些问题往往藏在 reset 的边缘 case 里，而不是主干规则中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
