HTML响应式布局中针对折叠设备铰链区域的避让设计实战-html教程-PHP中文网

折叠屏铰链区域不可绘制，需用@container hinge-safe配合matchmedia('(display-fold: horizontal)')实现响应式布局，禁用justify-content:center等静态定位，中间2px为硬边界不可交互。

html响应式布局中针对折叠设备铰链区域的避让设计实战

折叠屏上控件被中间“黑缝”挡住，不是布局写错了，是用了错误的定位逻辑——铰链区域不可绘制，justify-content: center算出来的坐标大概率落在物理不可见区。

为什么 `window.innerWidth` 和 `screen.width` 不能用来判断铰链位置

这两个值在折叠屏展开后仍返回完整宽度（比如 2208px），但实际可渲染区域被铰链从中劈开，左右各约 1090px，中间 2–4px 是硬遮挡。用像素偏移、calc(50% - 50px) 这类静态计算必然失效。

Android 12+ 的 env(safe-area-inset-left) 只管左右边框，对中间铰链完全无感知
resize 事件在折叠动画中高频触发，且不区分“开始折叠”和“已到位”，无法作为状态判定依据
真机上 matchMedia('(display-fold: horizontal)') 是目前唯一能稳定捕获铰链展开/闭合切换的信号

用 `@container hinge-safe` 替代媒体查询做布局约束

现代方案不靠 JS 算偏移，而让容器自己“感知”是否跨铰链。关键在两步：声明容器类型 + 写条件化网格。

html-deploy

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

下载

给最外层容器（如 <main></main>）加 container-type: inline-size; container-name: hinge-safe;
用 @container hinge-safe (min-width: 720px) and (aspect-ratio >= 2/1) 定义展开态条件——这个组合比单纯 min-width 更稳，排除了竖屏大屏误判
在此查询内设 grid-template-columns: 1fr 2px 1fr，中间列仅作间隙占位，必须加 pointer-events: none 防止点击穿透
所有可交互元素只放 grid-column: 1 或 grid-column: 3，绝不使用 span 3 或 justify-self: center

JS 回退逻辑必须监听 `change` 而非 `resize`

当 matchMedia('(display-fold: horizontal)') 不支持（如旧版 Chrome 或桌面模拟器），需 fallback 到尺寸+比例组合判断，且必须防抖。

监听 mediaQueryList.addEventListener('change', handler)，不是轮询或绑定 resize
回退条件建议用：window.matchMedia('(min-aspect-ratio: 4/3)') + window.innerHeight > 800 + !window.matchMedia('(display-mode: standalone)').matches 排除小屏干扰
每次状态变更后只更新一次 class（如 document.body.classList.toggle('folded', isFolded)），避免高频 DOM 操作
不要在 handler 里直接修改样式，统一走 CSS 类控制，利于复用和调试

真正难的不是写出 grid-template-columns: 1fr 2px 1fr，而是接受“中间永远不能放东西”这个前提——哪怕视觉上它看起来对称，铰链就是不可逾越的硬边界。任何试图“微调偏移量绕过”的思路，在不同厂商折叠屏（Z Fold / Find N / Pocket S）上都会失败。