/* ============================================================================= * zl-safe.css · 知了前端公共层 L0 环境层 —— 安全区变量（全站唯一 env() 出口） * ----------------------------------------------------------------------------- * 契约：任何页面都不得再自行定义 --safe-* 变量，也不得直接写 env()； * 底栏高度只能写在 --zl-bottom-h 上（且必须挂在 documentElement 上）； * 正文让位只能用 --zl-bottom-safe。 * * 【契约 A】--zl-bottom-h / --zl-bottom-safe 必须声明在 :root（= ）上。 * 自定义属性向下继承；若写到底栏元素自身，正文区是底栏的兄弟子树，读不到， * 会取回默认值 —— 正是"底栏长高却压住最后一个卡片"的根因。 * 后续 ZL.chrome 挂载时也只覆写 documentElement 上的 --zl-bottom-h。 * * 【契约 B】border-box（theme-v3.css:70 `*{box-sizing:border-box}`）下 * padding-bottom 被包进 height 里，故底栏必须成对写： * height: calc(var(--zl-bottom-h) + var(--safe-b)); * padding-bottom: var(--safe-b); * 只写其一等于没改（只写 padding 会让这根条恒定不长大，安全区从内容高里扣）。 * * 背景：Android / 鸿蒙（ArkWeb）手势导航条下 env(safe-area-inset-bottom) 恒为 0， * 底部 tabbar / 输入条会直接踩进系统手势区；iOS 的 env() 取值是正确的。 * 故对 Android/鸿蒙额外补 12px，iOS 行为保持不变。 * * 选择器特异性：html.is-android 为 0-1-1，高于 :root 的 0-1-0， * 不依赖书写顺序即可压住 :root，禁止改写成 .is-android。 * * 语法上限：CSS 变量 + env() + calc()，兼容 Chromium 60+ / iOS Safari 11.2+。 * ========================================================================== */ :root{ /* 四边安全区，全部带 0px 兜底：不支持 env() 的浏览器退化为 0 */ --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); /* 底栏内容高（不含安全区）。默认值 56px；页面或 ZL.chrome 在 上覆写 */ --zl-bottom-h: 56px; /* 正文唯一让位值：底栏高 + 安全区。禁止页面再写 calc(<数字> + var(--safe-b)) */ --zl-bottom-safe: calc(var(--zl-bottom-h) + var(--safe-b)); } /* Android / 鸿蒙手势导航区兜底：类由 zl-core.js 的 ZL.env.applyShellClasses() 挂在 上 */ html.is-android{ --safe-b: calc(env(safe-area-inset-bottom, 0px) + 12px); }