Iphone媒體查詢不起作用，而其他人則是

我得到了一些關於ipad，galaxy等的媒體查詢。雖然那些ipad和galaxy完美工作，但iphone並沒有。有誰知道我做錯了什麼？Iphone媒體查詢不起作用，而其他人則是

我的查詢（以這個順序）：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

} 

@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
and (orientation : portrait) { 

} 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 

}

這一切都來源於responsive.css，我也有一個默認的CSS文件，但該文件覆蓋響應一個沒有任何意義，因爲星系和iPad媒體查詢工作。

來源

2015-10-06 twan

我不認爲你需要使用所有3個這些查詢。他們可能相互衝突。如果你只是使用第一個，並刪除'和（方向：肖像）'這應該是好的縱向和橫向。 – Jay

您在 -tags內是否有？ – danjah

該信息有點不清楚。你是否每個設備都運行三個查詢，或者第一個用於iPad，第二個用於星系，第三個用於iphone？ – Jaques

刪除所有這些查詢，並用這一個替換它們。它適用於iPad和iPhone兩種方向。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { /* STYLES GO HERE */}

我不是100％具體的。但我認爲你目前的查詢是相互衝突。例如..

用的400像素的屏幕寬度的裝置會來兩者下：(min-device-width : 320px) and (max-device-width : 568px)和(min-device-width : 360px) and (max-device-width : 640px)。

來源

2015-10-06 12:44:25 Jay

謝謝你的回答，但這些媒體查詢都有不同的CSS。所以我不能把所有的CSS都放在一個媒體查詢中。然後，iPad和iPhone會有相同的CSS，不是嗎？我明白你的意思，但這意味着沒有針對特定設備的解決方案，而我確定存在。 – twan

@twan如果你的元素響應，那麼他們應該沒問題。你有沒有看過第三方庫，比如bootstrap？鏈接：http：//getbootstrap.com/。許多預定義的類來幫助網格系統等。如果這不是你能做的事。然後用'orientation'加回最後一行。 **但**，我相信你可能會混淆小型手持設備的實際分辨率，如iPhone。最新型號（iPhone 6+）的分辨率爲1920 * 1080，比大多數舊顯示器都大。 – Jay

但這不是在媒體查詢中的目標解決方案嗎？如果我查找iphone 5的媒體查詢，它會得到一個分辨率（或更好的說：像素比）：320x568 – twan

Iphone媒體查詢不起作用，而其他人則是

回答

相關問題