iPad Pro的正确媒体查询是什么？

Question

我有这两个但它们不起作用。我在Chrome中模拟。

    /* Landscape*/

    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {}

    /* Portrait*/
    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {}

如果我删除 'and (orientation: landscape)'，那么里面的css在第一个媒体查询中起作用。 正确的方向是什么，是横屏还是竖屏？

HTML meta 标签设置为：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

- Rory

---

你的问题不够清晰，请具体说明你想要实现什么。 - Rahul

对我来说很清楚：IPad Pro上既没有调用Portrait CSS也没有调用Landscape CSS。如果我删除方向，它们就可以工作了。 - Rory

我曾经遇到过类似的问题。这篇文章真的帮了我很多。 - riasc

谢谢，我收到了一大堆 CSS 代码（我不是 UI 图形设计师）。我会尝试转换您链接中的 .scss 文件。CSS 中似乎存在方向的普遍问题。我也遇到了 Galaxy Tabs 没有检测到方向的问题。 - Rory

Answer 1

/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Portrait */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

我没有iPad Pro，但这在Chrome模拟器中对我有效。

- nykon333

---

请注意测试在分屏模式下运行的移动Safari（如果尝试检测设备，通常会导致问题！）。 - robocat

这也将针对像我的HP Envy和Firefox这样的4K屏幕，而不是iPad Pro。 - Skoua

Answer 2

/* Landscape*/

@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)  {}

/* Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)  {}

iPad Pro的纵向媒体查询应该没问题。

iPad Pro的横向媒体查询（min-device-width）应该为1366px，(max device-height)应该为1024px。

希望这可以帮到您。

- Daniel T.

---

当我在Google Chrome模拟器上尝试在“iPad Pro”上运行此操作时，它对我无效。 - user3003106

如果您将“只有”删除，并使用“min-width”代替“min-device-width”，在Chrome中不起作用吗？ - Gabriel Rosario

哇，这是我见过的唯一一个完美运作的媒体查询！谢谢。 - Michael Sinclair

只需要将第一个破折号更正为连字符，并且加上(min-device-width: 1024px)和(max-device-height: 1366px)的限制条件，就可以很好地工作了。 - Maurilio Atila

Answer 3

请注意，有多个iPad Pro，每个都具有不同的视口大小：在使用Chrome开发者工具模拟iPad Pro时，默认选项是iPad Pro（12.9英寸）。如果您想模拟另一个iPad Pro（10.5英寸或9.7英寸）并使用不同的视口大小，则需要添加一个具有正确规格的自定义模拟设备。

您可以在以下网址搜索设备、视口及其相应的CSS媒体查询：http://vizdevices.yesviz.com/devices.php。

例如，iPad Pro（12.9英寸）将具有以下媒体查询：

/* Landscape */ 
@media only screen and (min-width: 1366px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-width: 1024px) and (orientation: portrait) { /* Your Styles... */ }

与此同时，iPad Pro (10.5英寸)将具备以下功能：

/* Landscape */ 
@media only screen and (min-device-width: 1112px) and (orientation: landscape) { /* Your Styles... */ }

/*Portrait*/ 
@media only screen and (min-device-width: 834px) and (orientation: portrait) { /* Your Styles... */ }

- Jubal Lindsey

Answer 4

我不能保证这对于每一款新发布的iPad Pro都适用，但是截至2019年，这种方法相当有效：

@media only screen and (min-width: 1024px) and (max-height: 1366px)
    and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {
    /* ... */
}

- Skoua

Answer 5

这对我很有效。

这是我的解决方法。

/* Portrait */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-width: 1112px) 
  and (max-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2)
 {

}

- STrunkett

Answer 6

虽然有点晚，但希望这能帮你避免头痛！ 所有这些都是因为我们需要检测目标浏览器是否是移动端！

如果是移动端，就要结合min/max-(width/height)使用。

所以只需要这个似乎就可以了：

@media (hover: none) {
    /* ... */
}

如果设备的主要输入机制不能轻松地悬停在元素上，或者虽然可以悬停但不易操作（例如需要长按以模拟悬停），或者根本没有主要输入机制，那么我们使用"none"！从下面的链接中，可以看到很多这样的情况。 在这里描述也可查看浏览器支持情况 参见MDN。

- Mamrezo

Answer 7

我尝试了几个提出的答案，但问题是媒体查询与其他查询冲突，而不是在iPad Pro上显示移动CSS，而是显示桌面CSS。所以，我使用确切值而不是使用尺寸的最大和最小值，它能起到作用，因为在iPad Pro上无法调整浏览器大小。

请注意，我添加了一个用于小于900px宽度设备的移动CSS查询；如果需要，可以随意删除它。

这是查询，它结合了横向和纵向，适用于12.9英寸，如果您需要针对10.5英寸进行定位，则可以简单地添加这些尺寸的查询：

@media only screen and (max-width: 900px), 
(height: 1024px) and (width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape), 
(width: 1024px) and (height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait)  {

     // insert mobile and iPad Pro 12.9" CSS here    
}

- frenchie

---

当您有一些重叠的查询时，这对我来说效果最佳。 - Meules

Answer 8

对于那些想要针对 iPad Pro 11" 的用户，device-width 是 834 像素，device-height 是 1194 像素，device-pixel-ratio 是 2。来源：Safari 在 iOS 模拟器上报告的 screen.width、screen.height 和 devicePixelRatio。

竖屏的精确媒体查询：(device-height: 1194px) and (device-width: 834px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)

- salomvary

Answer 9

iPad Pro 12th Gen - 2022，我已经尝试过了，而且它也起作用了。

竖屏：

@media only screen and (width: 1024px) and (height: 1292px) {}

横向：

@media only screen and (width: 1366px) and (height: 950px) {}

- sayooj surendran