奇思乎乎乎 iPhone 16e · 17 系列 · Air - 一束网址,折射万屏
100%

输入网址,立刻开始预览

预设:
自定义:

iPad 分屏模式响应式适配

iPad 支持分屏多任务(Split View 和 Slide Over)。当用户把你写的网页放在一半屏幕上,或者以侧边栏形式呼出时,你的页面宽度可能从 1024px 瞬间缩到 320px 甚至更窄。

非常容易被忽略的坑:

  • 宽度断点失效:你原本以 768px 作为平板断点,但在分屏时,屏幕宽度变成了 320px。此时如果页面还是 2 列布局,文字会挤压成一条线。
  • 鼠标悬停事件丢失:iPad 分屏时外接鼠标支持变差,不要过分依赖 `:hover` 来展示内容。
  • Canvas / WebGL 变形:分屏拖动时,resize 事件会高频触发,导致图形卡顿。

测试方法:在预览器中,选择“iPad(一半屏幕)”或者直接把浏览器窗口拉窄,观察在 320px - 500px 宽度区间内,你的导航栏是否折叠、表格是否溢出。

常见问题

iPad 分屏时,媒体查询会变吗?
会。媒体查询是基于视口宽度而非物理屏幕宽度。当分屏为一半时,触发的是 500px 左右的断点,而不是 1024px。
如何监听分屏的拖动事件?
浏览器会触发 window.resize。建议用防抖(debounce)函数包裹你的重绘逻辑,避免拖动时页面卡死。

相关工具