折叠屏铰链区域必须主动规避，因@media无法识别动态铰链位置，需用WindowSegments API获取真实分屏边界并结合事件监听实现精准避让。
折叠屏铰链区域不是“可选避让区”，而是必须主动规避的视觉与交互失效带；不处理会导致按钮不可点、表单错位、弹层被截断，且无法通过纯 CSS 媒体查询精准识别。
为什么不能用 @media 判断铰链位置
媒体查询只响应屏幕宽高、DPR、横竖屏等全局特征，但铰链位置随设备形态（single-fold-horizontal / single-fold-vertical）、折叠角度、系统分屏策略动态变化，@media 完全无法感知。例如同一台设备在帐篷模式下铰链实际处于屏幕底部，而桌面模式下可能偏上——这些状态 @media (min-width: 1200px) 根本区分不了。
- 所有基于
width或aspect-ratio的断点都只能粗略适配“展开态”或“折叠态”，无法定位铰链物理坐标 -
window.matchMedia也不提供铰链偏移量、segment边界等原生信息 - 试图用
screen.width+ 硬编码偏移（如calc(50vw - 24px)）在双折/外折设备上必然失效
必须用 WindowSegments 获取真实分屏边界
WindowSegments 是目前唯一能拿到铰链两侧像素坐标的 Web API，它返回一个数组，每个元素描述一个显示段的 left、right、top、bottom，直接对应物理屏幕分割线。
- 横向折叠（铰链在上下边）时，
segments[0].right和segments[1].left之间就是不可靠带，宽度通常为 16–48px - 竖向折叠（铰链在左右边）时，用
segments[0].bottom与segments[1].top判断垂直方向的断裂线 - 必须配合
resize和orientationchange事件监听，因为铰链位置会在折叠/展开瞬间重算
示例：避开横向铰链右侧操作按钮
立即学习“前端免费学习笔记（深入）”；
const updateButtonPosition = () => {
if ('windowSegments' in window) {
const segments = window.windowSegments;
if (segments.length > 1) {
const hingeGap = segments[1].left - segments[0].right;
const safeRight = segments[0].right - hingeGap / 2;
document.querySelector('.action-btn').style.right = `${window.innerWidth - safeRight}px`;
}
}
};
window.addEventListener('resize', updateButtonPosition);
position: fixed 在折叠屏上会彻底失灵
position: fixed 元素在折叠态下常被渲染到铰链缝隙中、被系统裁剪、或在跨屏拖拽时卡死不动——因为它锚定的是整个 viewport，而非某个 segment。
- 替代方案一：改用
position: sticky，并确保其父容器是单个 segment 内的 DOM 节点（如<section>） - 替代方案二：用 JS 动态计算粘性区域，监听
segments变化后重新设置top/bottom值 - 绝对定位（
position: absolute）也需以 segment 边界为参考，不能依赖document.body尺寸
悬浮类组件（Tooltip / ActionSheet）的跨屏检测逻辑
这类组件一旦跨过 segments[0].right，就会有一半内容消失或触发系统级遮罩，必须在显示前做边界校验。
- 用
element.getBoundingClientRect()获取组件当前布局框 - 对比
rect.right > segments[0].right，若为真，则优先右移（transform: translateX(-Xpx)），再考虑降级为底部弹出 - 避免使用
getComputedStyle(element).left，该值在折叠态下可能返回错误的视口相对值 - 注意：iOS Safari 目前不支持
windowSegments，需 fallback 到 UA 检测 + 折叠态启发式判断（如screen.width < 720 && screen.height > 1200）
铰链避让不是“加个 margin 就完事”的样式微调，它是把 UI 从“单屏思维”切换到“多段物理屏幕”的底层重构；漏掉任意一个 segment 边界检测点，都可能在某款折叠设备上导致关键操作不可用。
