先用 chrome://inspect 录制 timeline 判断卡顿类型：layout/paint 超 16ms 是 css 问题，scripting 占比高是 js 问题；禁用 js 后仍卡则为 css 或 dom 问题。
低端Android设备上页面卡顿，怎么定位是CSS还是JS问题
真机跑起来卡，DevTools 里看不出明显瓶颈，得先分清是渲染层卡（CSS）还是执行层卡（JS）。低端 Android 设备（比如 Android 5–7 的千元机）GPU 能力弱、JS 引擎老，两者表现差异大。
- 用
chrome://inspect连上设备，在 Timeline 面板里录一段滚动或交互过程，重点看Layout和Paint阶段耗时是否持续超过 16ms（即掉帧）——如果是，大概率是 CSS 触发了强制同步布局或重绘，比如用了width: calc(100% - 20px)+position: absolute组合，或者box-shadow层级太深 - 如果
Scripting占比高，且Recalculate Style频繁触发，说明媒体查询或 JS 动态改 class 太勤，尤其注意ResizeObserver在老 WebView 里会每帧轮询，别在scroll里直接调它 - 禁用 JS 后再测：在 Chrome DevTools 的
Settings → Preferences → Debugger → Disable JavaScript，刷新页面。如果卡顿消失，问题出在 JS；如果依然卡，就是 CSS 或 DOM 结构本身有问题
为什么@media断点在低端Android上不生效
不是代码写错了，而是老安卓 WebView 对媒体查询的解析有缺陷，尤其当 viewport meta 不规范或存在嵌套时。
-
max-device-width已被废弃，但部分 Android 4.4 WebView 仍只认它，而现代写法max-width反而不触发——统一改用@media (max-width: 768px)，别混用device-width - 嵌套媒体查询（比如
@media (min-width: 768px) { @media (orientation: landscape) { ... } }）在 Android 5.x 的系统 WebView 中静默失效，必须扁平化写成@media (min-width: 768px) and (orientation: landscape) - viewport meta 标签漏了
initial-scale=1，或写了user-scalable=no导致某些 WebView 直接跳过媒体查询逻辑——确保只用<meta name="viewport" content="width=device-width, initial-scale=1">，且放在最前面
Flexbox/Grid 在低端Android上的黑盒验证方法
不能只看“有没有渲染出来”，要验证行为是否符合预期：折叠、换行、对齐、溢出处理是否一致。
- 写个最小测试页，只含一个
display: flex容器和 3 个子项，分别测试：flex-wrap: wrap下缩放窗口是否真换行（而不是子项被压缩变形）、justify-content: space-between是否两端对齐（老 WebView 常 fallback 成flex-start）、flex-shrink: 0是否真的阻止收缩（很多机型会忽略） - Grid 布局几乎不用——Android 5–6 的 WebView 对
display: grid支持为 0，连@supports (display: grid)都返回 false，必须降级到 Flexbox 或 float - 用 JS 黑盒检测：
getComputedStyle(el).display === 'flex'返回'-webkit-flex'或'flex'都算通过；但若返回'block'，说明根本没启用，得加-webkit-前缀并 fallback
本地文件 file:// 协议下测试为何总失败
直接双击打开 HTML 文件，在低端 Android Chrome 里 media query、vh、甚至 rem 都可能不工作，这不是 bug，是安全策略限制。
- file:// 协议下，浏览器不信任 viewport meta，
width=device-width被无视，页面按桌面模式渲染（默认 980px 宽），所有响应式逻辑失效 - 必须起本地 HTTP 服务：终端运行
npx serve或python3 -m http.server 8000，然后用电脑局域网 IP（如http://192.168.1.100:8000）让手机访问 - 确保服务根目录有
index.html，且其中<meta name="viewport">标签存在且位置正确——否则即使走 HTTP，老 WebView 也会因缺少上下文拒绝激活响应式渲染
真正麻烦的不是“怎么测”，而是测出问题后没法改——很多低端 Android 设备 WebView 无法升级，只能靠降级方案兜底。比如用 float 替代 Flexbox、用 max-width + height: auto 控制图片、放弃 vh 改用 JS 动态算高度。这些妥协点，往往在模拟器里完全暴露不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
