iPad Pro下Media Query失效问题及单样式表适配需求

首先得揪出你遇到的核心问题：iPad Pro竖屏的CSS像素宽度其实是1024px，而不是你误以为的物理宽度小于800px——因为设备像素比（DPR）的存在，物理尺寸和CSS渲染用的逻辑像素是两回事。这就是为什么它会跳过你的移动样式表，反而命中了低分辨率桌面的规则。

你后来改的media query太复杂，用了多个逗号分隔的OR条件，很容易导致不同设备同时匹配多个样式表，自然会出现样式混乱。要实现同一时刻仅激活一个样式表，关键是设计互斥且精准的媒体查询，同时明确区分触控设备（手机、平板）和桌面设备（鼠标操作）。

调整方案：用交互属性+精准区间实现互斥匹配 #

我建议你重新梳理媒体查询的逻辑，结合pointer属性区分交互类型，再搭配尺寸区间，确保每个设备只会命中一个样式表：

<!-- 1. 移动/平板设备（触控交互，包含iPad Pro竖屏） -->
<link 
  media="only screen and (pointer: coarse) and ((max-width: 800px) or (orientation: portrait and max-width: 1024px))" 
  href="mobile-styles.css" 
  rel="stylesheet" 
  type="text/css"
>

<!-- 2. 低分辨率桌面设备（鼠标交互，宽度≥801px且高度≤899px） -->
<link 
  media="only screen and (pointer: fine) and (min-width: 801px) and (max-height: 899px)" 
  href="low-res-desktop.css" 
  rel="stylesheet" 
  type="text/css"
>

<!-- 3. 高分辨率桌面设备（鼠标交互，宽度≥801px且高度≥900px） -->
<link 
  media="only screen and (pointer: fine) and (min-width: 801px) and (min-height: 900px)" 
  href="high-res-desktop.css" 
  rel="stylesheet" 
  type="text/css"
>

为什么这样能解决问题？ #

• 区分交互类型：pointer: coarse专门匹配触控设备（手机、平板），pointer: fine匹配桌面设备（鼠标/触控板），从根源上避免平板被误判为桌面。
• 精准覆盖iPad Pro：iPad Pro 12.9寸竖屏的CSS宽度是1024px，所以专门加了orientation: portrait and max-width: 1024px的条件，确保它加载移动样式。
• 完全互斥的条件：三个样式表的媒体查询没有重叠区间——要么是触控设备满足移动规则，要么是桌面满足低分辨率，要么是桌面满足高分辨率，不会同时激活多个样式表。

额外提示 #

如果你需要兼容更老的浏览器，可以在触控设备的条件里补充-webkit-min-device-pixel-ratio: 1.5这类DPR判断，但pointer属性的浏览器支持度现在已经非常好（除了极旧的IE），是更现代的区分方式。

内容的提问来源于stack exchange，提问作者frenchie