viewport meta 标签必须包含 viewport-fit=cover 以适配双屏折叠设备，确保内容撑满非矩形安全区域；需结合 screen.availWidth、resize 事件及 container 查询实现精准响应，避免仅依赖媒体查询或 vw 单位。
viewport meta 标签必须支持双屏折叠逻辑
双屏设备（如 Surface Duo、华为 Mate X 系列）在折叠/展开状态切换时，screen.width 和 window.innerWidth 会剧烈变化，但很多页面仍按单视口逻辑渲染，导致内容被裁切或留白严重。根本问题不在 CSS 布局，而在 viewport 初始化没覆盖折叠态。
常见错误现象：width=device-width 在展开态下取到的是单屏宽度（比如 720px），而非双屏总宽（1440px）；折叠后又因初始缩放未重置，文字糊成一团。
- 必须使用
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">——viewport-fit=cover是关键，它让页面内容能真正“撑满”折叠屏的非矩形安全区域（尤其刘海+折痕区） - 不要硬写
maximum-scale=1.0，否则折叠后无法手动放大查看细节（无障碍场景必踩坑） - 安卓 WebView 128+ 和 iOS Safari 16.4+ 才完整支持
viewport-fit，旧版本需降级 fallback：用@supports (display: flex)包裹双屏专用样式
用 screen.orientation + resize 事件识别折叠态
CSS 媒体查询对「折叠」无原生支持，@media (display-mode: standalone) 或 (min-width) 都无法区分「双屏展开」和「单屏横屏」。真实判断得靠 JS 监听系统级屏幕方向与折叠状态。
使用场景：导航栏需在双屏展开时横向铺满两屏，在折叠后自动收为底部 tab；表单字段在双屏下左右分栏，在单屏下堆叠。
立即学习“前端免费学习笔记（深入）”；
- 监听
screen.orientation.angle变化：0°/180° 通常是单屏竖屏，90°/270° 不代表一定是双屏横屏——要结合screen.availWidth判断是否接近双倍分辨率 - 注册
window.addEventListener('resize', handleResize)，并在 handler 中检查Math.abs(window.innerWidth - screen.availWidth) < 50，差值小说明当前视口已贴合物理屏幕（即已展开） - 避免只依赖
matchMedia('(min-width: 1200px)')，某些双屏设备折叠后innerWidth仍超 1200px（因系统 UI 占位）
Flexbox/Grid 在双屏展开时的列跨屏断裂问题
双屏展开后，浏览器通常将两个物理屏合并为一个逻辑视口（如 2400×1080），但默认 Flexbox 的 flex-wrap: wrap 或 Grid 的 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) 会把内容平均切分，导致卡片在折痕处被硬生生劈开。
性能影响：强行用 grid-column: span 2 指定跨屏元素，可能触发强制同步布局（layout thrashing），尤其在滚动中频繁重排。
- 给容器加
container-type: inline-size，再用@container (min-width: 1200px)做容器查询——比媒体查询更精准，它查的是父容器宽度，而非整个视口，能避开折痕干扰 - 对关键模块（如轮播图、侧边栏）设置
contain: layout paint，防止跨屏重排扩散影响整页 - 避免用
vw单位做卡片宽度（如width: 50vw），双屏下 50vw = 单屏宽，结果卡片只占一屏，另一屏空着
触摸事件在折痕区的坐标偏移与穿透
双屏设备折痕区域存在触控盲区或坐标映射异常，用户点击靠近折痕的按钮时，event.clientX/Y 返回值可能跳变，甚至触发相邻屏的事件（比如点左屏 tab，却激活了右屏弹窗）。
容易被忽略的地方：这不是 CSS 能解决的问题，必须从事件捕获层干预。
- 在根元素上监听
touchstart，用event.touches[0].screenX替代clientX，因为screenX是设备坐标系，绕过视口缩放和折痕映射误差 - 对折痕敏感区域（如左右各 80px）加
pointer-events: none，再用绝对定位的透明遮罩层承接点击，并手动派发到目标元素 - 禁用
-webkit-tap-highlight-color: transparent，iOS Safari 在双屏上对该属性解析不稳定，易造成点击反馈错位
双屏适配最复杂的点不在布局，而在「同一套 DOM 如何同时响应两种物理显示逻辑」。折痕不是 CSS 断点，是硬件边界；折叠不是尺寸变化，是渲染上下文切换。所有方案都得绕过浏览器对「单视口」的默认假设，直接跟 screen 和 visualViewport API 对话。
