iPad 支持分屏多任务(Split View 和 Slide Over)。当用户把你写的网页放在一半屏幕上,或者以侧边栏形式呼出时,你的页面宽度可能从 1024px 瞬间缩到 320px 甚至更窄。
非常容易被忽略的坑:
- 宽度断点失效:你原本以 768px 作为平板断点,但在分屏时,屏幕宽度变成了 320px。此时如果页面还是 2 列布局,文字会挤压成一条线。
- 鼠标悬停事件丢失:iPad 分屏时外接鼠标支持变差,不要过分依赖 `:hover` 来展示内容。
- Canvas / WebGL 变形:分屏拖动时,resize 事件会高频触发,导致图形卡顿。
测试方法:在预览器中,选择“iPad(一半屏幕)”或者直接把浏览器窗口拉窄,观察在 320px - 500px 宽度区间内,你的导航栏是否折叠、表格是否溢出。