autoprefixer不处理vh单位压缩、backdrop-filter前缀不稳定、sticky嵌套失效等问题，需js动态注入--vh、显式配置overridebrowserslist、@supports降级等手动干预。
Autoprefixer 不会自动给 CSS 加前缀，它只在 PostCSS 流程中、按 browserslist 配置、对已写的标准属性做前缀注入——绝大多数“Safari 手机不生效”“Android WebView 闪退”，问题不在 Autoprefixer 本身，而在配置没对上真实设备环境或流程根本没走通。
PostCSS 流程是否真在处理你的 CSS 文件
很多项目以为装了插件就万事大吉，但构建工具压根没把 CSS 文件送进 PostCSS。Vite 5+ 默认启用，但如果你在 vite.config.js 里写了 css.postcss 字段，反而会覆盖默认配置；Webpack 则完全依赖你手动配 postcss-loader，漏一个环节就断链。
- 在
postcss.config.js里加一行require('xxx-missing')，启动不报错 → 说明该文件根本没被读取 - Vue 单文件组件中，
<style></style>块默认不走 PostCSS，必须用<style lang="postcss"></style>或确认vue-style-loader+css-loader+postcss-loader链路完整 - React 项目若用
create-react-app，它内置 PostCSS，但仅处理.css和.module.css，.scss需额外配postcss-scss
browserslist 必须匹配真实手机用户版本
写 "last 2 versions" 看似稳妥，但 Safari 更新节奏慢（17.5 → 18.0 跨数月），iOS 版本又常滞后——你的真实用户可能大量卡在 iOS 16.4 或 Android 12 WebView，而配置却拉进了 Safari 18 和 Chrome 125，结果该加的前缀没加，不该加的还多塞了一堆。
- 优先把
browserslist写在package.json里，避免.browserslistrc和 CI 配置不一致 - 国内项目别迷信
> 1%：iOS 15.0 全球占比仍超 1%，但它在部分低端 iPhone 上对aspect-ratio支持不稳定，需显式写"iOS >= 16.4" - 运行
npx browserslist确认输出里真有你要覆盖的机型，比如ios_saf 16.4、and_uc 14.4（UC 浏览器 Android 版）
哪些 CSS 属性 Autoprefixer 根本不碰，必须手动处理
它只补前缀，不改语义、不降级语法、不模拟缺失特性。以下常见手机端问题，Autoprefixer 完全无能为力：
-
vh单位在 iOS Safari 地址栏展开/收起时被压缩 → Autoprefixer 不动单位，得用 JS 注入--vh: 100vh并动态更新 -
backdrop-filter在 iOS 15.4+ 才稳定支持-webkit-backdrop-filter，但 caniuse 标记“需要前缀”状态不稳定 → 需在postcss.config.js中显式加overrideBrowserslist: ["ios_saf >= 15.4"] -
position: sticky在 iOS Safari 15.4 之前嵌套失效 → Autoprefixer 不识别该限制，得用@supports not (position: sticky)降级为position: fixed+ 滚动监听 -
gap在 Android WebView 75–89 中需-webkit-gap，但仅当browserslist明确包含and_qq 10.4或and_uc 14.2才会生成
验证补全是否真正生效的三步法
别等上线才查，本地就能快速定位断点：
- 打开浏览器开发者工具 → Elements 面板 → 找目标元素 → 看 Styles 右侧是否出现
-webkit-、-ms-等声明（注意：有些前缀如-webkit-tap-highlight-color不会显示在面板，得看源码） - 在构建产物目录（如
dist/assets/*.css）里全局搜索-webkit-flex或-ms-grid，确认字符串真实存在 - 真机测试必须覆盖最低目标机型：iOS 16.4 Safari、Android 12 WebView、华为鸿蒙 4.2 的自研内核，模拟器不能代替
最常被忽略的是：Autoprefixer 输出的前缀只是“语法正确”，不代表布局能跑通——比如 display: -ms-flexbox 在 IE11 里要配合 -ms-flex-pack 而非 justify-content，这类映射关系它不会帮你检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
