Chrome开发者工具中如何针对不同尺寸iPad编写专属Media Query？

我完全懂你的困扰——单纯靠min-device-width和max-device-width确实容易和其他大屏设备重叠，尤其是iPad Pro的尺寸区间和不少安卓平板撞车。下面是针对不同iPad型号的精准媒体查询规则，结合设备像素比（DPR）、屏幕朝向和固定分辨率值来缩小匹配范围，彻底避免误判：

1. 普通iPad（含iPad Air 1/2、iPad mini 4/5、第9/10代iPad） #

这类iPad的CSS分辨率固定为纵向768px、横向1024px，设备像素比（DPR）统一为2。可以用固定的min/max设备宽度结合DPR来精准锁定：

/* 纵向普通iPad */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 768px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
  /* 你的样式规则 */
}

/* 横向普通iPad */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  /* 你的样式规则 */
}

only screen能过滤掉旧版非屏幕设备，固定min和max为同一值再搭配DPR，基本不会和其他设备匹配。

2. iPad Pro 10.5/11寸 #

这两款的纵向CSS宽度均为834px，横向分别为1112px（10.5寸）和1194px（11寸），DPR也都是2。可以按需合并或分开编写：

/* 纵向iPad Pro 10.5/11寸通用 */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
  /* 你的样式规则 */
}

/* 横向iPad Pro 10.5寸 */
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  /* 你的样式规则 */
}

/* 横向iPad Pro 11寸 */
@media only screen 
  and (min-device-width: 1194px) 
  and (max-device-width: 1194px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  /* 你的样式规则 */
}

如果不需要严格区分10.5和11寸的横向样式，也可以用min-device-width: 1112px和max-device-width: 1194px覆盖两者。

3. iPad Pro 12.9寸 #

这款的纵向CSS宽度为1024px，横向为1366px，DPR同样是2。结合朝向就能和普通iPad的横向状态区分开：

/* 纵向iPad Pro 12.9寸 */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
  /* 你的样式规则 */
}

/* 横向iPad Pro 12.9寸 */
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  /* 你的样式规则 */
}

额外小技巧 #

如果担心还是有极端重叠情况，可以加入aspect-ratio条件辅助筛选。比如普通iPad横向的宽高比是4:3（1024/768=1.333），iPad Pro 12.9寸横向是1366/1024≈1.334，虽然接近，但结合朝向和DPR已经足够区分，一般不需要额外添加。

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