Question

我有类似的媒体查询：

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

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

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

我尝试过的事情包括：

更改规则中的文字颜色（是的，它是明亮的红色，所以我知道我的规则正在应用）
确保我已经包含了通常推荐的视口元标记（以及包含设备规则的其他版本）
如果横向模式被解释为比标准设置更宽（568像素？），则会将max-width更大的数字加到更大的数字上
使用像素代替rems，这里我终于发现了正在发生的事情。

在将文本设置为少量8px并再次确认纵向模式正常工作后，我注意到在横向模式下，文本大小受到影响，实际上它是缩放< / em>文本，但仍然不符合我指定的大小（再次，在纵向模式下正确渲染，我已经确定最大宽度是在横向模式下“注册”）。

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

事实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

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

$(document).ready(function() {
    $(".list-item").click(function() {
        var list-item = $(this).text();
        console.log(list-item);
    });
});

建议使用here和here。我的所有其他设置现在也被提取（因为它不仅仅是一个规则 - 我在媒体查询中更改了多个元素）。

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

媒体查询无法在iPhone 5s横向模式下运行

1 个答案: