分屏模式下媒体查询失效的根本原因是视口被压缩至320–610px，远低于768px传统断点，且orientation不可靠；应改用@media (display-mode: browser)结合min-width/max-width区间判断，并通过matchmedia动态监听视口变化。
分屏模式下网页布局失真，不是媒体查询没生效，而是你用的断点还在按“全屏设备”逻辑写——min-width: 768px在 iPad Split View 里可能只给到 500px 视口，orientation: landscape也根本不会触发。
为什么@media (min-width: 768px)在分屏下完全失效
分屏（Split View、Slide Over）会强制压缩视口宽度，iPad 上常见值是 320–610px，远低于传统“平板断点”。此时 min-width: 768px 永远不匹配，而 max-width: 768px 又会把手机和分屏混为一谈。更麻烦的是：系统缩放、字体放大、浏览器工具栏展开都会进一步扰动 window.innerWidth，导致断点漂移。
- 别再依赖固定像素断点判断“是不是平板”，分屏下它只是个窄窗口
-
orientation媒体特性在分屏切换瞬间常为undefined或延迟更新，不可作为唯一依据 - 用
screen.width或screen.availWidth读取物理屏宽？iOS Safari 会返回固定值（如 768），安卓 WebView 则可能被缩放干扰，基本不可信
用 @media (display-mode: browser) + 动态 matchMedia 监听视口变化
display-mode: browser 是目前最可靠的分屏识别信号：它在独立浏览器窗口（含 Split View 主窗口）中为 browser，而在 PWA 全屏或微信内置浏览器中为 standalone 或 minimal-ui。配合 window.matchMedia 实时监听，能捕获分屏拉伸/收缩过程。
- 基础检测：
@media (display-mode: browser) and (min-width: 480px)覆盖绝大多数分屏主窗口场景 - 必须加 JS 监听防抖，避免 resize 频繁触发重排：
const mq = window.matchMedia('(display-mode: browser)'); mq.addEventListener('change', debounce(handleDisplayModeChange, 100)); - 不要只监听一次——用户拖动分屏边界时，
matchMedia会多次触发matches切换
侧边栏、栅格列数等关键布局必须放弃“固定列数”思维
分屏宽度波动大（比如从 520px 拉到 600px），硬写 grid-template-columns: repeat(3, 1fr) 会导致内容挤或留白突兀。真正可行的是用 minmax() + 显式范围约束，再叠加 display-mode 条件。
- 错例：
@media (min-width: 768px) { grid-template-columns: repeat(3, 1fr); }—— 分屏下永远不进这个块 - 正解：
@media (display-mode: browser) and (min-width: 480px) and (max-width: 640px) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))); } - 侧边栏别设固定
width: 240px，改用flex: 0 0 auto+min-width: 240px，主内容用flex: 1自适应剩余空间
微信小程序分屏适配要额外开 "resizable": true
微信小程序默认禁用 iPad 分屏，即使 CSS 写对了也拿不到真实视口。必须在 app.json 中显式开启，否则 window.innerWidth 始终返回模拟值（通常是 750px）。
- 配置项必须写在
app.json根级：{"resizable": true}，不是 page.json - 开启后，
wx.getSystemInfoSync().windowWidth才会返回真实分屏宽度（单位 px） - 仍需搭配媒体查询：小程序 WXSS 支持
@media (min-width: 500px)，但断点值要按实测调整，别套用 768
分屏适配最易被忽略的一点：它不是静态状态，而是连续变化的过程。CSS 媒体查询只抓快照，JS 监听必须跟上，且所有布局计算都要预留 20–30px 的弹性余量——因为系统 UI 条、键盘弹出、分屏拖拽动画都会临时侵占可用空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
