媒体查询在 iPhone 5s 横向模式下不起作用

Question

我有一个类似的媒体查询：

@media screen and (max-width: 600px) {
  .blah {
    font-size: 1.25rem;
  }
}

在浏览器开发工具的响应式测试模式下，一切正常。当我拖动和缩放模拟视口时，我可以看到所有的变化。

在 iPhone 5s（实际）设备上，纵向模式可以正常工作，但在设备上的横向模式下，它不尊重相同的媒体查询。

我尝试过的事情包括：

1. 更改规则中的文本颜色（是的，它是鲜​​红色，所以我知道正在应用我的规则）
2. 确保我已包含通常推荐的视口元标记（以及包含设备规则的其他版本）
3. 将max-width 增加到更大的数字，以防横向模式被解释为比其标准设置更宽（568 像素？）
4. 使用像素而不是 rems，这就是我终于注意到正在发生的事情的地方。

在将文本设置为 8px 并再次确认纵向模式可以正常工作后，我注意到在横向模式下，文本大小受到影响，实际上是缩放 文本，但仍然不是根据我指定的大小（再次，在纵向模式下正确呈现，并且我已经确定最大宽度在横向模式下“注册”）。

这能告诉我什么吗？您认为这里发生了什么，特定于设备/版本？

font-size 在横向模式下似乎确实发生了变化，但没有达到我指定的大小（并且可以在纵向模式下正确看到--8px 非常小，但在横向模式下它只是略微减小了大小） ，听起来几乎就像设备/浏览器正在根据自己的规则“提供帮助”。

但如前所述，我已经包含：<meta name="viewport" content="initial-scale=1.0"> 并且可以在我输出的 HTML 中看到它。 <meta name="viewport" content="width=device-width, initial-scale=1.0">，同样的结果。

这个问题与另一个问题相似，没有得到回答：iPhone 5 landscape media queries not working。那里的投票响应忽略了原始问题的上下文并且未能回答原始问题，也没有回答我的问题。

（另请注意，上面的海报似乎遇到了类似的问题，没有解决方案/解释。）

另一个更新：我可以专门为这种情况指定媒体查询：

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
  .blah {
    font-size: .5rem;
  }
}

我可以调整字体大小，但数字不匹配——我只需要盯着它，选择越来越小的数字，直到得到我想要的大小。而且（再次），这只是在横向模式下，尽管在我的媒体查询中有正确的max-width（所以我知道它正在工作）。

我尝试了其他的东西，每次都用不同的尺寸和颜色来确认更改是否有效，添加!important（没有实际效果），只能得出结论，我的 iPhone 5s 发生了一些“奇怪”的事情仅在横向模式下渲染时。它似乎没有严格遵守我的视口设置，我已经验证它存在于呈现的 HTML 中，并且自己做出了一些奇怪的选择。

Answer 1

好的，我认为它现在可以工作了。我使用了针对我的设备屏幕尺寸的横向特定媒体查询：

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
  html {
    -webkit-text-size-adjust: none; /* none for no scaling */
  }
}

这是推荐的 here 和 here。我的所有其他设置现在也都在使用（因为它不仅仅是一个规则——我正在更改媒体查询中的多个元素）。

（感谢那些海报的解决方案。:)