2015-02-10 62 views
0

在iPhone 6上的横向方向Safari尽管我已根据新的iPhone尺寸调整了我的媒体查询范围,但它呈现桌面样式而不是移动样式。纵向移动样式按预期显示。Safari浏览器iPhone 6风景不服从媒体查询

当我将手机从纵向旋转到横向时,移动样式会在被覆盖之前短暂显示,并且可以看到桌面样式。

使用Chrome浏览器时,该网站在横向上的行为与预期相同,并呈现移动样式。

该网站是使用Zurb基金会5建立的。 有没有办法强制Safari遵守媒体查询?

在此先感谢

Live link

编辑:

的问题似乎是,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

尝试@media只有屏幕和(min-width: 375px)和(max-width: 667px)和(-webkit-min-device-pixel-ratio: 2)和(orientation: landscape){}

大多数网上说有min-device-widthmax-device-width,我从来没有得到那个工作。当我尝试它的时候,我看到了这个设备,它现在可以工作了。

相关问题