css grid 在 android 4.4 webview 中完全不支持，display: grid 等声明被静默丢弃，导致页面塌陷或白屏；必须通过 ua 匹配 + 临时元素探测识别环境，添加 .no-grid 类并内联降级 flexbox 布局，同时配合媒体查询确保小屏可用性。
CSS Grid 在老旧安卓浏览器（如 Android 4.4 内置 WebView）中直接被忽略，连 display: grid 都不解析，页面会退化为无样式裸 HTML 或彻底白屏——这不是布局错乱，是整个渲染树缺失关键样式层。
Android 4.4 WebView 完全不支持 Grid，连 display 值都识别失败
Android 4.4（KitKat）搭载的 Chromium 30 内核对 CSS Grid 零支持：它不认识 display: grid、grid-template-columns、gap 等任何 Grid 属性。浏览器遇到这些声明时，不是报错，而是静默丢弃整条规则；如果整个页面样式依赖 Grid 构建结构，#app 或 main 容器可能变成 display: block 且无宽高约束，导致内容塌陷或不可见。
- 典型现象：开发环境一切正常，真机调试时页面空白，DevTools 的 Elements 面板里容器元素没有 computed
display值，或显示为block - 必须用 JS 检测兜底：不能依赖
@supports (display: grid)，因为该语法在 Android 4.4 中同样不被识别，检测块会被直接跳过 - 推荐检测方式：
if (window.CSS && CSS.supports && CSS.supports('display', 'grid'))不可靠；改用getComputedStyle(document.body).display === 'grid'也不行（返回block）；最稳妥是 UA 字符串匹配 + 特性探测组合：/(Android\s+4\.4|Chrome\/30)/.test(navigator.userAgent)+ 尝试创建带display: grid的临时元素并检查是否生效
别用 css-grid-polyfill，它会让滚动和输入卡成幻灯片
css-grid-polyfill 早已停止维护，它通过 JS 遍历 DOM、计算位置、动态插入 position: absolute 元素来模拟 Grid 行为。在 Android 4.4 这种低性能 WebView 中，只要子元素超过 10 个，列表滚动就会掉帧严重，输入框聚焦时键盘弹出延迟明显，表单校验反馈滞后——实测 20 项网格在 Nexus 5 上平均帧率低于 12fps。
- 它不支持
grid-auto-flow、grid-template-areas动态区域，也不处理fr单位的弹性计算 - polyfill 注入的节点会破坏原生事件流，导致
focusin、touchstart监听失效 - 现代构建工具（Webpack/Vite）里引入它还会触发大量 “eval is not supported” 报错，因 Android 4.4 不支持
Function构造函数执行字符串代码
真正可行的降级方案：两套样式 + 条件 class 切换
放弃“一套代码跑所有”的幻想。给 Android 4.4 及更老环境提供简化线性布局，用 flexbox（Android 4.4 支持基本 display: flex 和 flex-direction）或 float + clear 实现一维流式结构，并通过 class 控制加载时机。
- 基础 HTML 结构保持语义不变：
<main class="layout-root"><section class="card">...</section></main> - 在 JS 初始化阶段判断环境，添加降级 class：
document.documentElement.classList.add('no-grid')（不建议加在body，避免 FOUC） - CSS 分层书写：
/* 默认现代布局 */<br>.layout-root { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }<br><br>/* 降级布局（仅当 no-grid 存在时生效） */<br>.no-grid .layout-root { display: flex; flex-wrap: wrap; margin: -6px; }<br>.no-grid .card { flex: 0 0 calc(33.333% - 12px); margin: 6px; box-sizing: border-box; } - 注意：Android 4.4 的
flex-basis对百分比支持不稳定，优先用flex: 0 0 XXpx或固定列数 +width配合margin模拟间隙
内联首屏关键样式，防止 CSS 加载失败导致白屏
即使降级方案写好了，如果外部 CSS 文件因网络问题 404 或加载超时，页面依然白屏——因为降级样式本身也在那个被阻塞的 CSS 文件里。
- 把最核心的降级布局规则（如
.no-grid .layout-root、.no-grid .card、html, body, #app基础尺寸与显隐）内联进的<style></style>标签，体积控制在 6KB 内 - 禁止在内联样式中使用
@import或url()，它们会触发额外请求并阻塞渲染 - 构建时用
critical工具提取首屏必需样式，但需人工校验：打开 Chrome DevTools → Network → Disable cache → Offline，刷新页面，确认首屏卡片、标题、按钮仍可见且排列基本可用 - 搭配
<link rel="preload" as="style" href="main.css">提前拉取完整样式表，但不要依赖它作为首屏保障
真正难的不是写出兼容代码，而是让降级后的布局在小屏上依然可读、可点、不重叠——比如三列卡片在 320px 宽度下必须自动转为单列，这需要媒体查询配合 class 切换，而不是指望 Grid 的 auto-fit。很多项目卡在这里：JS 检测写了，降级样式也写了，但没做断点适配，结果 Android 4.4 上文字挤成一团、按钮点不到，用户根本没法用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
