window.getWindowSegments() 是最精准识别横向双屏折叠设备并动态排版的方式，它直接读取浏览器原生物理显示区域数据，返回左右屏 DOMRect 以精确定位折痕、驱动 CSS 响应式布局、避让不可靠区，并保障状态连续性。
直接用 window.getWindowSegments() 获取屏幕分段信息，是目前最精准识别横向双屏折叠设备（如 Galaxy Z Fold 横向展开、华为 Mate X 系列横展）并动态排版的方式。它不依赖抖动的 resize 事件，也不靠猜测宽高比，而是读取浏览器原生上报的物理显示区域数据。
准确获取左右屏边界与折痕位置
横向双屏折叠设备展开后，window.getWindowSegments() 通常返回两个 DOMRect 对象，分别对应左屏和右屏矩形区域。关键不是总宽度，而是它们的相对位置关系：
- 左屏
segments[0]的right值即为物理折痕的右侧边界（单位：px） - 右屏
segments[1]的left值即为折痕左侧边界，二者应基本一致 - 可用
segments[0].width作为左屏安全内容宽度，避免关键按钮、输入框、弹窗锚点落在折痕区
用 CSS 变量驱动响应式布局切换
把分段数据转为 CSS 自定义属性，在样式层实现无 JS 干预的排版响应：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 在 JS 中设置：
document.documentElement.style.setProperty('--left-panel-width', `${segments[0].width}px`) - CSS 中写：
.main-content { width: var(--left-panel-width); }或grid-template-columns: var(--left-panel-width) 1fr; - 配合
@media (display-mode: standalone)和env(safe-area-inset-left)补充兜底，防止部分 WebView 不支持 segments
避开折痕区的关键元素定位策略
横向折叠时，铰链位于屏幕中央偏上区域，视觉和触控都存在“不可靠带”。对操作密集型内容（如表单、控制条、弹出菜单），需主动避让：
立即学习“前端免费学习笔记（深入）”；
- 用
margin-right: calc(100vw - var(--left-panel-width) - 16px)将右侧操作按钮拉回左屏内 - 对悬浮类元素（如 Tooltip、ActionSheet），通过
getBoundingClientRect()判断其是否跨过segments[0].right，超限时自动右移或改为底部弹出 - 禁用
position: fixed跨屏定位，改用position: sticky或 JS 动态计算粘性区域
状态切换时保持用户上下文
折叠/展开是瞬时动作，但用户正在操作的内容不能“闪退”或重置：
- 记录折叠态下的滚动
y值与展开态下的y值，切换后调用element.scrollTo({ top: savedY }) - 表单输入框焦点在展开后应自动恢复，且光标位置不丢失（需监听
focusin并缓存selectionStart） - 避免用
display: none隐藏侧边栏——改用visibility: hidden; height: 0; overflow: hidden;，确保 DOM 保活、状态可续
