应使用多层媒体查询组合覆盖横屏平板：优先@media (min-width: 1024px) and (orientation: landscape) 适配ipad，补充@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) 捕获中等安卓平板，并结合(hover: hover)/(hover: none)、(display-mode: browser)及resize事件动态响应分屏与交互变化。
用 @media (min-width: 1024px) and (orientation: landscape) 覆盖主流 iPad 横屏，但别指望它能抓全安卓平板
这个媒体查询能稳定匹配 iPad 第9代及 Pro 系列横屏（CSS 宽度 1024px–834px），但很多安卓平板横屏视口宽度卡在 600–900px 区间——比如三星 Tab S9+ 在分屏模式下可能只给 580px，@media (min-width: 1024px) 根本不触发。真正起作用的是设备实际渲染的视口宽度，不是物理分辨率或厂商宣传尺寸。
实操建议：
- 把
@media (min-width: 1024px) and (orientation: landscape)当作“高可信起点”，用于 iPad 和部分大屏安卓平板 - 必须补充
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape)捕获中等宽度横屏平板（如华为 MatePad 11、小米平板 6） - 禁用
user-scalable=no的<meta name="viewport">，否则某些安卓浏览器（如 Samsung Internet）会冻结orientation判断，旋转后样式不更新 - 避免用
screen.width做 JS 判断再切类名——它返回物理像素，和 CSS 媒体查询完全脱节
分栏宽度不能只靠断点，得加 hover 和 pointer 过滤触屏干扰
纯靠宽度判断横屏分栏，很容易在安卓平板上把手指滑动操作误当成鼠标悬停，导致侧边栏意外展开或折叠。iPad 横屏 + Apple Pencil 场景下也存在类似问题：orientation: landscape 成立，但用户实际在用精细指针操作，需要更窄的交互反馈区。
实操建议：
- 用
@media (min-width: 1024px) and (orientation: landscape) and (hover: hover) and (pointer: fine)启用带悬停提示、可拖拽调整宽度的分栏（如 VS Code 风格侧边栏） - 对仅支持触控的场景（如大多数安卓平板横屏），改用
@media (min-width: 768px) and (orientation: landscape) and (hover: none)，分栏固定宽度 + 更大点击热区（min-height: 48px） - 别在同一个断点里混用
hover: hover和hover: none规则——浏览器不会同时生效，会导致样式竞争失效
display-mode: browser 是识别分屏/多窗口的关键，但 Safari 不支持
iPad 的 Slide Over 和 Split View、安卓的自由分屏都会压缩视口宽度，但 orientation 仍报告 landscape，单纯靠宽度区间会把分屏误判成“小桌面”。display-mode: browser 能准确区分是否运行在独立窗口（standalone）还是浏览器标签页中，是目前唯一能间接反映分屏状态的 CSS 媒体特性。
实操建议：
- 优先写
@media (display-mode: browser) and (orientation: landscape)作为分屏横屏兜底规则 - Safari 不支持
display-mode，需用 JS 补充：window.matchMedia('(display-mode: browser)').matches在 Chrome/Firefox/Edge 中有效，在 Safari 返回false - 不要依赖
screen.availWidth或window.innerWidth做分栏开关——分屏时它们返回压缩后的值，但无法区分是分屏还是用户缩放
分栏组件必须响应 resize，不能只靠初始媒体查询
用户从竖屏切横屏、从全屏进分屏、从分屏拖大窗口……这些操作都会动态改变视口尺寸，但很多开发者只在页面加载时查一次媒体查询，后续布局就僵住了。尤其安卓平板上，系统 UI（如底部导航栏）在横屏时可能动态显隐，导致 innerHeight 变化，进而影响分栏高度计算。
实操建议：
- 对关键分栏容器（如
.sidebar）绑定resize事件监听，用window.matchMedia动态重查规则 - 避免在 CSS 中写死
width: 280px，改用flex-basis: 280px; min-width: 240px; max-width: 320px，留出弹性空间 - 在 JS 中检测到横屏分栏启用后，主动调用
element.style.setProperty('--sidebar-width', '280px')，让 CSS 变量驱动布局，比 class 切换更可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
