2015-02-10 88 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,我從來沒有得到那個工作。當我嘗試它的時候,我看到了這個設備,它現在可以工作了。

相關問題