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

Question

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

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

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

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

我尝试过的事情包括：

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

文本设置为一个很小8像素，并再次确认肖像模式正常工作后，我注意到，在横向模式下，文本大小受到影响，而事实上它的缩放文本，但仍然没有按照我指定的大小（再次，以纵向模式正确呈现，并且我已经确定最大宽度在横向模式下是“注册”）。

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

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横向媒体查询不起作用 。 在那儿被否决的回答忽略了上下文，也无法回答原始问题，也没有回答我的问题。

（还请注意，以上张贴者似乎也遇到了类似的问题，没有解决/解释）。

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

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

而且我可以调整字体大小，但是数字不匹配-我只需要盯着它，然后选择越来越小的数字，直到获得所需的大小即可。 而且（尽管如此），尽管媒体查询中的max-width正确（所以我知道它正在工作），但这仅处于横向模式。

我尝试了其他方法，每次都使用不同的大小和颜色来确认更改是否有效，添加!important （无实际效果），并且只能得出结论，当在Landscape中进行渲染时，我的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 */
  }
}

建议在这里和这里 。 我的所有其他设置也正在获取中（因为这不仅仅是一条规则-我正在更改媒体查询中的多个元素）。

（感谢那些张贴者的解决方案。