在iPhone 6上的横向方向上，尽管我根据新的iPhone尺寸调整了媒体查询范围，但Safari渲染桌面样式而不是移动样式。在纵向中，移动样式按预期显示。
当我将手机从纵向旋转到横向时，移动样式会在被覆盖之前短暂显示，并且可以看到桌面样式。
使用Chrome时，网站在横向上的行为与预期一致，并呈现移动样式。
该网站使用Zurb Foundation 5构建。 有没有办法强迫Safari遵守媒体查询？
提前致谢
编辑：
问题似乎是Chrome和Safari对元视口标记的解释不同。
这是我的原始代码，可以在Chrome中正常使用，Safari也可以在肖像中使用。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
更改为此功能可以正确显示Safari，尽管Chrome和Safari都有缩放，因为根本没有缩放。
<meta name="viewport" content="width=device-width, user-scalable=no" />
添加以下内容之一：initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,会导致Safari显示桌面样式，但Chrome会按预期运行，即纵向和横向移动样式，无需缩放。
有没有办法有条件地加载针对不同浏览器的不同视口元标记？
答案 0 :(得分：0)
我认为您可以使用javascript进行浏览器和/或功能定位，然后按照本文所述动态更改元标记：
Can I change the viewport meta tag in mobile safari on the fly?
答案 1 :(得分：0)
仅尝试@media屏幕和（min-width: 375px）和（max-width: 667px）和（-webkit-min-device-pixel-ratio: 2）和（orientation: landscape）{}
大多数在线人士都说有min-device-width和max-device-width，我从来没有这样做过。拿出＆＃34;设备，它现在有效。