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)  {}

如果我删除“和（方向：横向）”，那么其中的 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" />

原文由 Rory 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议