应使用@media (max-height: 480px)等视口瓶颈断点替代device-width/height硬编码，并配合@supports (padding-top: env(safe-area-inset-top))检测安全区，再结合viewport-fit=cover和JS监听resize实现灵动岛动态适配。
直接用 @media (device-width: 390px) and (device-height: 852px) 适配 iPhone 15 灵动岛是错的——它既不识别灵动岛，也不感知安全区域变化，更在横屏、键盘弹出、折叠屏半开时完全失效。
为什么 @media (orientation: landscape) 在灵动岛机型上基本没用
微信 iOS 和 Safari 16.4+ 中，orientation 媒体查询只读系统方向传感器，不监听真实视口尺寸变化。iPhone 15 Pro 横屏时 window.innerHeight 可能从 932px 骤降到 430px，但 @media (orientation: landscape) 不会触发重算。更糟的是：灵动岛在横屏下会“收起”，顶部安全间距变小，但媒体查询对此毫无反应。
- 它无法区分竖屏下灵动岛展开（44px）和收起（24px）两种状态
- 它对底部手势条高度（
safe-area-inset-bottom）完全无感 - Android WebView 和 X5 内核里该查询常返回空或延迟 1~2 秒
真正该用的媒体查询组合断点
放弃设备尺寸硬编码，转而捕捉“视口瓶颈”信号。以下断点在 iPhone 15 Pro/Pro Max 上实测稳定：
-
@media (min-aspect-ratio: 13/9)：比单纯orientation抗干扰，折叠屏半开、键盘弹出时仍能准确判断“宽屏倾向” -
@media (max-height: 480px)：横屏本质是高度骤减，这个值覆盖了 iPhone 15 Pro 横屏（430px）、SE（384px）等常见窄高场景 -
@media (min-width: 390px) and (min-height: 852px)：仅作辅助，必须搭配@supports主逻辑，否则在 iPad 或安卓大屏上误命中
示例：给全屏视频容器加横屏优化
video.fullscreen {
width: 100%;
height: 100dvh; /* 优先用 dvh，fallback 到 min-height */
}
@media (max-height: 480px) {
video.fullscreen {
object-fit: cover;
height: 100dvh;
}
}
@supports 检测 env(safe-area-inset-top) 的写法陷阱
这是适配灵动岛的唯一可靠入口，但语法极易写错：
- ✅ 正确写法：
@supports (padding-top: env(safe-area-inset-top))—— 必须带属性名和值，只写env(...)会被整块忽略 - ❌ 错误写法：
@supports (env(safe-area-inset-top))或@supports (safe-area-inset-top) - iOS 11.0–11.1 只支持
constant()，所以声明顺序必须是：top: constant(safe-area-inset-top); top: env(safe-area-inset-top); top: 0; - Android 厂商几乎不支持该检测，别指望它在小米、OPPO 的 WebView 里返回 true
灵动岛顶部适配示例（固定导航栏）：
@supports (padding-top: env(safe-area-inset-top)) {
header.fixed-top {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
}
灵动岛全屏展示必须配合 viewport 和 JS 监听
媒体查询只是布局调整手段，真正让内容“避开灵动岛”的是三层协同：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">—— 缺这个，env()变量全为 0 - CSS 用
env(safe-area-inset-top)动态撑开顶部，用env(safe-area-inset-bottom)留出手势条空间 - JS 主动监听：
window.matchMedia("(max-height: 480px)").addEventListener("change", handler)，比废弃的orientationchange事件准得多
容易被忽略的点：灵动岛在播放音频、计时、导航等后台任务时会动态改变高度，纯 CSS 无法响应这种运行时变化，必须靠 JS 轮询或监听 resize + scroll 组合判断视口实际可用高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
