Pixel Fold 必须结合 screen.orientation、document.visibilityState 和 visualViewport 事件精准判断折叠状态，CSS 需用 display-mode: browser 与 dynamic-range: high 双条件匹配 HDR 内屏，且 Web App Manifest 中 display_override 必须设为 ["window-controls-overlay"] 才能启用原生折叠屏支持。
Pixel Fold 的 viewport 与折叠状态判断
Pixel Fold 默认以「展开态」（folded: false）触发桌面级 viewport，但实际开合时 window.innerWidth 会在 ~673px（外屏）和 ~1840px（内屏）之间跳变，单纯靠宽度判断会误判。必须结合 screen.orientation 和 document.visibilityState 辅助识别当前是否处于有效折叠过渡中。
- 外屏竖屏：width ≈ 270px，
screen.orientation.type为"portrait-primary" - 内屏横屏：width ≈ 1840px，
screen.orientation.type为"landscape-primary" - 折叠动画中（约 300ms），
document.visibilityState可能为"prerender"或"hidden"，此时应冻结 DOM 布局更新
CSS media query 要用 display-mode: browser + dynamic-range
Pixel Fold 的内屏支持 HDR，但默认 CSS 媒体查询不会自动启用高动态范围样式。仅靠 @media (min-width: 1800px) 不够——它在 Chrome DevTools 模拟器里生效，真机上因 WebView 渲染管线差异常被忽略。必须叠加 display-mode: browser 和 dynamic-range: high 才能稳定命中。
@media (display-mode: browser) and (dynamic-range: high) and (min-width: 1800px) {
.app-shell {
--ui-scale: 1.2;
font-size: clamp(14px, 2.5vw, 18px);
}
}
JavaScript 中监听 resize 会漏掉折叠动画帧
Chrome for Pixel Fold 在 hinge 动画期间会节流 resize 事件，典型表现为从外屏切到内屏时只触发 1 次（而非预期的 3–5 次），导致基于 width 变化的响应式逻辑失效。正确做法是改用 visualViewport 的 resize 事件，并配合 requestAnimationFrame 做防抖校验。
- 监听
visualViewport.addEventListener('resize', handler)，它比 window.resize 更敏感 - 每次回调中检查
visualViewport.width与window.innerWidth差值是否 > 50px，再触发重排 - 避免直接操作
document.body.style.transform，Pixel Fold 的合成层对 transform 有额外延迟
Web App Manifest 的 display_override 必须设为 ["window-controls-overlay"]
如果不显式声明，Pixel Fold 的 Chrome 会强制使用 standalone 模式，导致状态栏遮挡、无法访问系统返回手势、折叠动画卡顿。只有设为 ["window-controls-overlay"]，才能启用原生折叠屏窗口管理协议，让浏览器把 hinge 区域识别为可交互安全区。
立即学习“前端免费学习笔记（深入）”；
{
"display_override": ["window-controls-overlay"],
"launch_handler": {
"client_mode": "focus-existing"
}
}
这个字段在 Pixel Fold 上不是可选优化项，而是决定能否正常进入内屏全屏的关键开关。漏掉它，所有 CSS 和 JS 适配都白做。
