css 媒体查询不适用于 ipad 横向模式

Question

我有一个 ipad，我想在它处于横向模式时应用媒体查询。这是我尝试过的（我尝试了两种选择。）：

选项 1：

/* iPads (landscape) ----------- */
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

选项 2：

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

当 ipad 处于横向模式时，上述媒体查询似乎不起作用。

在 header.php 文件中，我使用以下元属性：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>

问题陈述：

我想知道我应该在 元属性或上面的媒体查询中进行哪些更改，以便我可以应用媒体查询 当 ipad 处于横向模式时。

Answer 1

我会将您的 css 更改为以下代码：

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles */
}