针对折叠屏手机的HTML多视口弹性布局与维护指南-html教程-PHP中文网

折叠屏html多视口布局需区分物理分割与逻辑可视区域，优先用visualviewport.width实时获取真实宽度，配合@container查询、禁用硬编码尺寸、正确配置viewport-fit=cover，并通过多api交叉验证中间态。

针对折叠屏手机的html多视口弹性布局与维护指南

折叠屏手机的 HTML 多视口布局不能靠一套 @media 规则打天下，必须区分「物理屏幕分割」和「逻辑可视区域」，否则在 Galaxy Z Fold 展开一半、Pixel Fold 悬停、Mate X5 半折时，页面会卡在错误状态——比如导航栏强行横排却只显示半截，或卡片网格错位堆叠。

用 `visualViewport.width` 替代 `window.innerWidth` 获取真实可视宽度

折叠动画过程中，window.innerWidth 常滞后 1–2 帧甚至不更新（尤其 Android WebView），而 visualViewport.width 在 Chrome 61+ / Edge 79+ 中能实时反映用户当前看到的像素宽度，包括半折叠过渡态。

直接读取 visualViewport.width，不要缓存它——每次 resize 或 orientationchange 后都重新取值
兼容处理：Safari 尚未支持 visualViewport，需 fallback 到 window.innerWidth + screen.orientation.angle 组合判断
别在 DOMContentLoaded 里一次性取值：折叠态可能在加载后才触发，必须监听 visualViewport.onresize

`@container` 查询比 `@media` 更适合折叠态组件级响应

传统 @media (min-width: 900px) 在折叠屏上失效，因为内屏展开后宽度达 1440px，但铰链阴影和系统 UI 占用实际可用宽度仅约 580px（Z Fold）或 620px（Pixel Fold）。此时容器本身宽度才是真实约束条件。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

给关键模块（如侧边栏、卡片列表）加 container-type: inline-size
用 @container (min-width: 500px) 控制布局切换，而非 viewport 宽度
避免同时用 @media 和 @container 套嵌同一元素——浏览器解析顺序不可控，易导致样式竞争
注意：Firefox 119+ 才开始支持 @container，生产环境需加 JS fallback（如监听 ResizeObserver）

折叠态下禁用 `transform: scale()` 和固定 `flex-basis`

很多页面在折叠后文字被压缩、按钮点不中，根源是用了 transform: scale(0.8) 或 flex: 0 0 120px 这类硬编码尺寸。折叠屏 DPR 高（Z Fold 内屏常为 3.5x）、字体渲染逻辑特殊，缩放会放大错位误差。

导航项改用 flex: 1 1 minmax(72px, auto)，保证最小触控区且可弹性收缩
图标+文字组合用 display: inline-flex; align-items: center;，不用 float 或绝对定位
所有 transform 相关动画（含 scale、translateX）必须包裹在 @supports (display: container) 或 JS 运行时检测中
禁用 white-space: nowrap，改用 text-overflow: ellipsis + min-width: 0 防止文本撑爆容器

`viewport-fit=cover` 必须写在最顶部，且不能与 `maximum-scale` 共存

没加 viewport-fit=cover 的页面，在折叠态下会被系统 UI（状态栏、铰链阴影）裁切；加了但位置错或参数冲突，会导致首次渲染白屏或字体跳变。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 必须是第一个标签，早于所有 <link> 和 <style></style>
删掉 maximum-scale=1 和 user-scalable=no —— 折叠屏用户常需双指缩放查看 hinge 区域内容，WCAG 要求必须支持
不要用 JS 动态插入 viewport meta：iOS Safari 会忽略，只认初始 HTML 解析结果

真正麻烦的不是展开态适配，而是半折叠、悬停、单侧激活这些中间态——它们没有统一 API 描述，只能靠 visualViewport + screen.orientation + window.matchMedia 三者交叉验证，且每种厂商实现细节不同。Pixel Fold 的 dynamic-range: high 可能比 Z Fold 的 screen-spanning 更早触发，但 Mate X5 根本不支持前者。留出真机测试窗口，别全信 DevTools 模拟器。