折叠屏设备的 viewport 识别依赖媒体查询而非 Bootstrap 自动适配，需手动针对 screen width/height、dynamic-range、flexible-display-area 等特性编写断点，并自定义 xxl 断点、禁用 navbar-expand-lg、使用 visualViewport.width 判断真实视口，避免布局错乱与 UI 闪烁。
折叠屏设备的 viewport 识别靠 media query，不是 Bootstrap 自动适配
Bootstrap 本身不感知折叠屏（如 Samsung Galaxy Z Fold/Flip、Pixel Fold），它只按 CSS 媒体查询中的 width、height、aspect-ratio 或 display-mode 做响应式断点判断。折叠态和展开态在浏览器中表现为两个完全不同的视口尺寸，必须手动用媒体查询捕获，不能依赖 col-md-6 这类默认断点“自动适配”。
常见错误是直接套用 col-lg-4 期望在展开态三栏、折叠态单栏——但折叠屏展开后 width 往往超过 1200px，仍命中 lg，结果还是三栏；而折叠态下 width 可能只有 280px，却因未覆盖 xs 断点逻辑，布局错乱。
- 优先检测
screen width和screen height，而非仅依赖min-width - Android 折叠屏展开后常为
2200px × 1760px（横屏）或1760px × 2200px（竖屏），需单独写@media (min-width: 1760px) and (min-height: 2200px) - 避免用
orientation: landscape判断——折叠屏竖着展开时仍是portrait，但宽度已远超常规手机
用 dynamic-range 和 flexible-display-area 检测折叠区域（Chrome 117+ 支持）
新版 Chrome 开始支持实验性媒体特性 dynamic-range 和 flexible-display-area，可识别折叠线位置。虽然 Bootstrap 不内置支持，但你可以用它覆盖默认栅格行为：
@media (dynamic-range: high) and (flexible-display-area: horizontal) {
.container { max-width: 90vw; }
.sidebar { display: none; }
}
注意：flexible-display-area 的值是 horizontal（折叠线横置，即上下两屏）或 vertical（折叠线竖置，即左右两屏），对应不同机型的物理结构。目前仅 Chromium 内核支持，Safari 和 Firefox 尚未实现。
- 必须开启 Chrome 实验标志：
chrome://flags/#enable-experimental-web-platform-features - 该特性返回的是逻辑区域信息，不是像素坐标，无法精确定位折叠线像素位置
- 不要用它替代基础断点，只作为增强层叠加在
min-width查询之上
折叠态下禁用 navbar-expand-lg 并强制收起导航
Bootstrap 默认的 navbar-expand-lg 在折叠屏展开态会意外触发（因为宽度超 992px），导致导航栏横向铺开、遮挡内容；而在折叠态又可能因高度不足无法滚动，菜单按钮点击无响应。
解决方案是绕过 expand 类，改用 JS 监听 resize 并结合 window.visualViewport?.width 判断真实可用宽度：
if (window.visualViewport?.width 1700) {
document.body.classList.add('unfolded');
}
再配合 CSS：
.folded .navbar-collapse { display: none !important; }
.unfolded .navbar-nav { flex-direction: row; }
- 别用
window.innerWidth——它包含滚动条宽度，且在地址栏弹出/收起时抖动 -
visualViewport.width更接近用户实际可见区域，尤其在 Android 折叠屏上更稳定 - 加
!important是因为 Bootstrap 的navbar-collapse内联样式优先级高
Grid 布局冲突：折叠屏展开后 col-12 仍被渲染为单列
很多开发者以为 col-12 是“全宽”，但在折叠屏展开态（比如 1760px 宽度）下，如果没写更高断点，它依然占满整行，浪费横向空间。真正需要的是“展开态双栏、折叠态单栏”，得显式声明：
<div class="col-12 col-xl-6">主内容</div> <div class="col-12 col-xl-6">侧边栏</div>
但问题在于：折叠屏的 xl 断点（1200px）太低，展开后立刻生效，侧边栏提前出现。应自定义一个更高断点，比如 xxl: 1700px：
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1700px );
然后用 col-12 col-xxl-6 精确控制。
- 修改 Bootstrap 变量必须通过 Sass 编译，不可直接改 CDN 版本 CSS
- 不要试图用
col-sm-12 col-md-6应对折叠屏——md在折叠态（280px）下根本不会触发 - 真机测试时务必关闭 Chrome DevTools 的设备模拟器，它不模拟折叠线和双屏渲染逻辑
实际部署时最容易被忽略的是：折叠屏浏览器会触发两次 resize 事件（折叠/展开瞬间各一次），且中间夹杂 visualViewport.resize。如果 JS 里没做节流或状态比对，classList 反复切换会导致 UI 闪烁。这事没法靠 CSS 解决，得在逻辑层守好状态边界。
