折叠屏适配不能仅依赖 min-width 媒体查询，应使用 chromium 119+ 的 screen-spanning 特性判断铰链状态，并配合 window.matchmedia 精准监听；pixel fold 还需 manifest 中设置 display_override 和 css 中同时满足 display-mode: browser、dynamic-range: high 与 min-width 才能稳定启用内屏 hdr 渲染。
折叠屏不能只靠 min-width 媒体查询判断
很多开发者把折叠屏当成“大号手机”，用 @media (min-width: 768px) 或 @media (min-width: 1200px) 匹配展开态，结果在 Galaxy Z Fold 或 Pixel Fold 上频繁误判——同一台设备横竖屏切换时宽高互换，折叠态和非折叠态可能共享相同视口尺寸。
真正可用的是 Chromium 119+ 支持的实验性媒体特性 screen-spanning，它直接反映铰链物理状态：
-
(screen-spanning: single-fold-horizontal)：横屏折叠（铰链在上下边），常见于 Z Fold 展开后 -
(screen-spanning: single-fold-vertical)：竖屏折叠（铰链在左右边），常见于 Pixel Fold 展开后 - 未匹配时自动回退到默认单面板布局，无需额外 fallback CSS
注意：screen-spanning 在桌面浏览器或旧版 Chrome 中返回 not all，必须配合 JS 回退逻辑，不能当作全局可用特性硬依赖。
window.matchMedia 监听比 resize 更可靠
resize 事件在折叠动画过程中被节流，Pixel Fold 上常只触发 1 次；而 window.matchMedia 能精准捕获铰链状态切换的关键节点。
正确写法是立即执行监听，不能等 DOMContentLoaded：
const foldQuery = window.matchMedia('(screen-spanning: single-fold-horizontal)');
foldQuery.addEventListener('change', e => {
if (e.matches) {
document.body.classList.add('folded-horizontal');
} else {
document.body.classList.remove('folded-horizontal');
}
});
// 必须在 script 标签内直接执行，页面加载完成前就要注册
别在回调里直接操作大量 DOM；用 requestAnimationFrame 批量更新样式，避免布局抖动。
Pixel Fold 必须叠加 display-mode: browser 和 dynamic-range: high
仅靠宽度判断在 Pixel Fold 上几乎必然失败：外屏竖屏约 270px，内屏横屏约 1840px，但折叠动画中视口宽度会跳变，且 document.visibilityState 可能短暂为 prerender。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
CSS 媒体查询必须同时满足三个条件才能稳定命中内屏 HDR 渲染管线：
-
display-mode: browser（排除 standalone 模式干扰） -
dynamic-range: high（启用 HDR 样式） -
min-width: 1800px（辅助过滤）
对应写法：
@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); }
}
漏掉任意一项，真机上都可能样式不生效——这不是兼容性问题，而是 Pixel Fold 的 WebView 渲染协议强制要求。
Web App Manifest 中 display_override 不是可选项
没设 display_override: ["window-controls-overlay"]，Pixel Fold 的 Chrome 就会强制进入 standalone 模式，导致三类问题：
- 系统状态栏遮挡内容区域
- 无法响应原生返回手势
- 折叠动画卡顿、延迟明显
必须在 manifest.json 中显式声明：
{
"display_override": ["window-controls-overlay"],
"launch_handler": { "client_mode": "focus-existing" }
}
这个字段在 Pixel Fold 上不是“锦上添花”，而是决定能否正常进入内屏全屏的关键开关。其他折叠屏设备（如 Z Fold）虽不强制，但统一写上更稳妥。
折叠屏适配最易被忽略的点不在 CSS，而在初始化时机和 manifest 配置——JS 监听要早于 DOM 加载，manifest 字段要写全且部署后验证生效，否则所有布局逻辑都建立在沙上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
