iOS 26+ Liquid Glass · 验证 examples
用法：在 iOS 26+ Safari 上打开下面任意一个 demo（不是 PWA / WebView）。
每个页面底部都有一个 debug panel，显示 useMetaTopOffset() /
env(safe-area-inset-top) 等实时值，并可切换图层做对比。
在非 iOS 26+ 设备上，可以用 panel 上的 Force offset = 10 按钮强制开启 Liquid Glass spacer，
模拟 iOS 26+ 的版面（但不会有真实的 backdrop-filter 透出效果）。
Liquid Glass 视觉行为
纯色页面背景 / 渐变 / 条纹三种背景下，分别打开/关闭 MetaColor 蒙版与 theme-color，观察顶部 6px 漏色和 44~54px falloff 半透明带是否真的存在。
layout · DOM 层FixedWrapper 布局正确性
显示 10px spacer + safe-area filler + slot 三段拼接的 X-ray 视图。开关 X-ray 模式查看 slot 是否准确落在 10 + safe-area-top。
三种广告放法对比
同一手机里并排三个广告位：top:0 / top: var(--safe-area-top) / FixedWrapper。肉眼对比哪个被状态栏遮挡、哪个被 falloff 糊住、哪个清晰。
fixed↔sticky 切换 / placeholder
FixedWrapper + 长内容。滚动时观察 placeholder 是否撑出正确高度、wrapper 顶层是否会闪动 / 抖动。同时对比 inline-style 高度 vs class 高度的差异。
layout · 色彩示意顶部布局可视化 · 色彩示意
iOS 26+ Liquid Glass 顶部布局的整体色彩 / 分层示意页：把 6px 漏色、falloff 半透明带、safe-area、业务 fix 广告等分段染色，单页纵览各层关系。
📐 规范 / 文档
-
CSS Environment Variables Module Level 1 · W3C / CSSWG
env()与safe-area-inset-*的规范本体，定义非矩形显示区域的安全内边距。 -
WHATWG HTML · meta theme-color · html.spec.whatwg.org
<meta name="theme-color">的标准定义,Safari 据此为半透明 chrome 染色。 -
MDN · env() · developer.mozilla.org
safe-area-inset-top等环境变量的用法与 fallback 写法。 - MDN · backdrop-filter · developer.mozilla.org Liquid Glass 透出带的 blur 效果即依赖此属性。
-
MDN · meta name=theme-color · developer.mozilla.org
theme-color 的取值、
media条件染色与浏览器支持现状。 - Can I use · env() / safe-area-inset · caniuse.com 实时浏览器支持矩阵。
- Can I use · backdrop-filter · caniuse.com 实时浏览器支持矩阵。
- Can I use · meta theme-color · caniuse.com 实时浏览器支持矩阵。