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

我有这两个，但它们不起作用。我在用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)  {}

如果我删除“和（方向：横向）”，那么其中的css将在第一个媒体查询中起作用。 横向和纵向的正确方向是什么

HTML元被设置为

<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" />

肖像媒体对iPad Pro的查询应该是正常的

iPad Pro的横向媒体查询（最小设备宽度）应为1366px，最大设备高度应为1024px

希望这有帮助

/* ----------- 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模拟器中对我有效。

这对我有效

/* 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)
 {

}

---

请注意，有多个iPad Pro，每个都有不同的视口：当通过Chrome开发者工具模拟iPad Pro时，iPad Pro（12.9“）是默认选项。如果您想用不同的视口模拟其他iPad Pro（10.5”或9.7“），则需要添加具有正确规格的自定义模拟设备

您可以在以下位置搜索设备、视口及其各自的CSS媒体查询：

例如，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... */ }

---

我尝试了几个建议的答案，但问题是媒体查询与其他查询冲突，它没有在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    
}

---

对于那些想要瞄准iPad Pro 11英寸的人来说，

设备宽度

为834px，

设备高度

为1194px，

设备像素比

为2。来源：

screen.width

、

screen.height

和

devicePixelRatio

由Safari在iOS模拟器上报告

---

准确的媒体纵向查询：

（设备高度：1194px）和（设备宽度：834px）和（-webkit设备像素比：2）和（方向：纵向）

为时已晚，但这可能会让您免于头痛！ 所有这些都是因为我们必须检测到目标浏览器是手机

这是一部手机吗？然后将其与最小/最大-（宽度/高度）的组合

所以这似乎是可行的：

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

如果设备的主输入机构系统不能轻松地悬停在元件上，或者它们可以但不容易地悬停在元件上（例如，执行长时间触摸以模拟悬停），或者根本没有主输入机构，则我们使用none！ 您可以从下面的链接中阅读许多案例

---

此外，对于浏览器支持

我不能保证这将适用于即将发布的每一款新的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) {
    /* ... */
}

---

你的问题不清楚。请具体说明您想要实现的目标。我似乎很清楚：IPad Pro上没有调用纵向和横向CSS。如果我取消他们的工作方向，我也会面临类似的问题。真的帮了我的忙。谢谢，我收到了大量的CSS（我不是一个喜欢UI图形的人）。我将尝试从您的链接转换.scs。CSS中的方向似乎有一个普遍的问题。我的Galaxy标签也无法识别方向。当我在“ipad pro”的谷歌chrome模拟器上尝试此功能时，如果你删除“only”并使用“min width”而不是“min device width”在chrome中不起作用，这对我不起作用？哇。这是我认为我见过的唯一一个媒体质疑，我可以说它非常有效！谢谢。只需要更正第一个到-和（最小设备宽度：1024px）和（最大设备高度：1366px）-就可以了。感谢@DanielBe小心地测试了在分屏模式下运行的Mobile Safari（如果试图检测设备，通常会导致问题！）。这也将针对4k屏幕，如我的HP Envy和Firefox，它不是iPad Pro。当你有一些重叠的查询时，这对我最有效，

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