document.body.clientWidth 在超宽屏或竖屏下“跳变”是因浏览器在极端比例下动态调整渲染宽度所致，受 viewport、overflow、系统缩放等影响，需用 matchMedia 或 ResizeObserver 替代硬阈值判断。
为什么 document.body.clientWidth 在超宽屏或竖屏下会“跳变”
这不是 JS 错误，而是浏览器在极端比例（如 32:9 超宽屏、iPhone 15 Pro Max 竖屏 1290×2796）下对 document.body.clientWidth 的计算逻辑变化导致的。当 viewport 宽度远大于高度（或反之），某些浏览器（尤其是 Safari 16.4+ 和 Chrome 120+）会动态调整根元素渲染宽度，以适配滚动行为或安全区域，进而影响 clientWidth 返回值——它可能突然从 2560 变成 2548，或在横竖屏切换瞬间抖动 ±12px。
关键点在于：clientWidth 是渲染后测量值，不是 CSS 声明值；它受 viewport meta 设置、overflow 隐式裁剪、甚至系统级缩放（如 macOS 的“放大显示”）共同影响。
- 必须搭配
getBoundingClientRect()对比验证，不能单靠clientWidth做布局判断 - 避免用
clientWidth < 768这类硬阈值做响应式分支，改用matchMedia("(max-width: 768px)") - 若需精确容器尺寸，优先监听
ResizeObserver，而非window.resize—— 后者在 iOS 横竖屏切换时会触发两次以上
浮动布局在 21:9 屏幕上塌陷的典型表现
你看到的「导航栏消失」「侧边栏被吸进主内容区」，大概率是 float: left + 未清除浮动 + width: 100% 组合在超宽视口下的必然结果。现代浏览器对浮动元素的包裹逻辑在宽度超过 3840px 时会退化：父容器不再自动扩展高度，子元素脱离文档流后，其 margin 和 padding 计算基准偏移，最终表现为视觉塌陷。
- 立即停用
float，所有多列布局改用display: flex或display: grid - 若必须兼容旧代码，至少给浮动父容器加
overflow: hidden或min-height: 1px强制 BFC 触发 - 检查
box-sizing是否统一为border-box，否则padding会撑破width: 100%导致横向溢出，在 21:9 屏上尤为明显
table-layout: fixed 在竖屏长页面中列宽错乱的原因
table-layout: fixed 要求浏览器按 <col> 声明或首行单元格宽度来分配列宽，但它在极端高宽比下会失效：当表格高度 > 5000px（常见于报表类竖屏页面），Chrome 会放弃逐列重排，转而按视口可见区域估算列宽，导致右半列突然收缩、文字换行、white-space: nowrap 失效。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
<col width="200">单独控制，必须配合table { width: 100% }和th, td { min-width: 0 } - 对长表格，用
position: sticky固定表头时，确保th内部使用flex包裹内容，避免因列宽重算导致 sticky 错位 - 测试时打开 DevTools → Rendering → “Emulate overscroll behavior”，观察是否出现列宽跳跃
viewport meta 在折叠屏和双屏设备上的实际效果
<meta name="viewport" content="width=device-width, initial-scale=1"> 在 Surface Duo 或三星 Galaxy Z Fold 等设备上，并不总能反映物理屏幕宽度。系统可能上报折叠态的单屏宽度（如 640px），而忽略展开后的双屏合并宽度（如 2152px）。结果就是 CSS 媒体查询断点错位，max-width: 1200px 的容器在展开后仍按 640px 渲染。
- 必须补充
content="width=device-width, initial-scale=1, viewport-fit=cover"，尤其对需要全屏沉浸的页面 - 用
window.screen.width和window.innerWidth做双重校验：前者反映设备能力，后者反映当前渲染视口 - 在折叠屏上，
resize事件可能只触发一次（展开完成时），但screen.orientation.type会先变为"landscape-secondary"，再变回"landscape-primary"—— 这个中间态才是真实切换信号
html 的 font-size 可能被系统文本缩放强制覆盖，且该覆盖不触发 resize 或 orientationchange 事件**。这意味着你测了 10 种屏幕尺寸，却没测过 Windows 设置里把“文本大小”调到 125% 的场景。 
