手机端页面白屏：又是 oklch 颜色兼容性惹的祸

症状：电脑浏览器一切正常，手机打开整页白屏或者大块区域没背景色。桌面 Chrome、Firefox 都好好的，一到手机 WebView 就完蛋。

根因

CSS 里用了 oklch() 颜色（常见于新构建工具自动生成的样式，比如 Tailwind v4 的默认调色板就是 oklch）。老版本 WebView（Android System WebView 更新滞后的机型、iOS 14 以下 Safari）不认识这个函数，整条声明作废。更糟的是如果写在 :root 变量里，引用它的所有属性一起失效，页面就成了"白板"。

定位方法

把 CSS 里所有 oklch 搜一遍：

grep -c oklch *.css

数量不为 0，而目标机型 WebView 版本低于 111（Chrome 内核），基本就是它。

修复

把 oklch 转成 hex，保留变量名不变：

/* 之前 */
:root { --bg: oklch(0.2 0.02 260); }

/* 之后 */
:root { --bg: #0d1117; }

预防

目标用户有国产安卓机就别直接用 oklch / color-mix 这类新函数，或者构建时加 postcss 插件做降级转换。桌面浏览器"看着没问题"从来不代表手机端没问题。