分屏多任务下 resize 事件不触发，因系统冻结 viewport 尺寸；应监听 visualViewport.resize 事件获取真实可视区域变化，兼容 iOS Safari 16.4+ 和 Chrome 61+。
移动端网页在分屏多任务模式下不会自动触发 CSS 重构——浏览器不发通知、window.innerWidth 不变、resize 事件不触发，所有响应式逻辑（包括 @media 查询）照常运行但完全失效。
为什么 resize 事件在 iPadOS / Android 分屏下静默失灵
iPadOS 和 Android 的分屏多任务（如 Slide Over、Split View、Freeform）是系统级窗口管理行为，Webview 被分配固定像素宽高后即“冻结”其 viewport 尺寸。即使用户拖动分屏边界，window.innerWidth 和 window.innerHeight 值保持不变，resize 事件根本不会派发。
- 实测：在 iPadOS 26.2 Beta 3 中将 Safari 分屏从 70% 拖到 30%，
console.log(window.innerWidth)输出始终为 834（默认竖屏宽度） - Android 14+ 的自由窗口（Freeform）同样不更新
visualViewport的width/height属性 - 关键区别：
visualViewport在缩放时会更新，但在分屏尺寸变化时仍静默
用 visualViewport 监听真实可视区域变化
唯一可靠的方式是监听 visualViewport 的 resize 事件——它反映的是用户当前实际看到的渲染区域，而非文档视口。
- 必须用
visualViewport.addEventListener('resize', handler)，不能依赖window.addEventListener('resize') - 注意兼容性：
visualViewport在 iOS Safari 16.4+ 和 Chrome 61+ 支持，但 Android WebView 旧版本可能无此 API - 示例判断逻辑：
if ('visualViewport' in window) { visualViewport.addEventListener('resize', () => { const w = visualViewport.width; const h = visualViewport.height; if (w < 600) { document.body.classList.add('split-mode'); document.body.classList.remove('desktop-mode'); } }); }
配合 CSS 自定义属性做动态样式注入
仅靠 JS 切 class 不够稳定——分屏启动瞬间、页面重绘、iframe 嵌套等场景下 class 可能丢失或滞后。更鲁棒的做法是把尺寸信息转为 CSS 自定义属性，由 CSS 原生响应。
立即学习“前端免费学习笔记（深入）”；
- JS 端实时写入：
function updateViewportVars() { if (!visualViewport) return; document.documentElement.style.setProperty('--vw', `${visualViewport.width}px`); document.documentElement.style.setProperty('--vh', `${visualViewport.height}px`); } visualViewport.addEventListener('resize', updateViewportVars); updateViewportVars(); // 初始化 - CSS 端直接使用：
@media (max-width: 600px) { ... }失效，但.container { width: calc(var(--vw) - 32px); }始终精准 - 避免用
vw/vh单位：它们基于 layout viewport，不是 visualViewport，分屏下值恒定
真机测试中最容易被忽略的坑
分屏适配的失败往往不在逻辑，而在设备行为细节：
- iPadOS 分屏冷启动时，
visualViewport可能延迟 100–300ms 才就绪，首次resize事件不可靠，必须手动调用一次初始化 - Android 自由窗口下，
visualViewport.scale可能突变为 1.25 或 1.5，导致--vw计算值偏小，需同步校正 - 微信内置浏览器、QQ 浏览器等 X5 内核不支持
visualViewport，需 fallback 到screen.width+ 用户代理检测，但精度极低 - 任何依赖
getBoundingClientRect()的布局计算，在分屏拖拽过程中会短暂返回错误坐标，必须加requestAnimationFrame节流
