css - 媒体查询在 iPad 上不起作用

Question

以下代码在 iPad 上没有任何作用，尽管字体与桌面相比应该更大......为什么？

<style type="text/css">
@media screen and (min-device-width: 481px) and (orientation:landscape) {
.header {
font-family: courier new, monospace;
color: #999999;
font-size: 16pt;
line-height: 12pt;
width: 38.25em;
 }
}
.header {
font-family: courier new, monospace;
color: #999999;
font-size: 12pt;
line-height: 12pt;
width: 38.25em;
}
</style>

Answer 1

尝试将@media 查询移到另一个标题类下方，我相信第二个标题类正在覆盖您的媒体查询

Answer 2

您是否尝试过测试您的媒体查询是否有效？例如，将字体更改为完全不同的字体或将背景颜色更改为红色。这样，您就会知道是媒体查询还是拼写错误。如果不是拼写错误，请为您的媒体查询添加一个最大的单独参数，这样浏览器就不会混淆，您也不需要重复代码。

.header {
        font-family: courier new, monospace;
        color: #999999;
        line-height: 12pt;
        width: 38.25em;
        }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and               (orientation:landscape
       {
       .header {
       font-size: 16pt;
          }
       }

@media only screen and (min-device-width: 1025px) {
      .header {
      font-size: 12pt;
          }
       }