媒體查詢用於桌面屏幕和手機屏幕

我有這樣的媒體查詢：媒體查詢用於桌面屏幕和手機屏幕

@media only screen 
and (max-width : 320px), 

only screen 
and (max-device-width : 320px) 
and (min-device-pixel-ratio : 2), 

only screen 
and (max-device-width : 320px) 
and (-webkit-min-device-pixel-ratio : 2), 

only screen 
and (max-device-width : 320px) {

它在桌面上，選擇瀏覽器小於320像素寬度，iPhone 4的人像，但它也選擇iPhone 4的景觀。當然，這不應該選擇橫向的iPhone 4的？

從我的理解，第一部分選擇寬度小於320px的屏幕。

第二部分相同的第二但webkit的供應商前綴

第三部分選擇在移動設備的屏幕寬度小於320像素，但是具有雙像素密度（iPhone 4/4S在這種情況下）

和第四部分與前兩部分相同，但沒有雙像素密度，因此應選擇iPhone 3gs和其他最大寬度爲320px的移動設備。因此，我基於上述不希望它在任何iPhone上選擇橫向模式？

任何想法如何添加到它來解決？

尼爾

來源

2012-06-17 rctneil

你更容易解決具體問題時，並呈現出一些研究工作後能得到有用的答案。請參閱[stackoverflow FAQ]（http://stackoverflow.com/faq），以獲取更多關於此處發佈的問題的預期格式的信息，並相應地修改您的問題。歡迎登機，順便說一句 –

這是一個特定的問題，媒體查詢是選擇橫向的iPhone，當我期望它不是。我自己寫了媒體查詢，這是我面臨的問題。因此我的問題在上面。第二部分只是一個相關的問題。我知道有兩種方法可以實現它並理解它們的積極和消極之處，但是想要其他人的想法，那肯定沒有問題？尼爾 – rctneil

沒有錯，我只是說，你應該把它分成兩個問題，並詳細說明你到目前爲止已經嘗試 –

您應該添加orientation : landscape你的CSS，像這樣：

@media only screen 
and (max-device-width : 320px) 
and (orientation : landscape) { 
    /* Styles */ 
}

來源

2012-06-17 16:13:07

好吧，iPhone仍然報告其寬度爲320px即使在風景中？如果是這樣，那麼必須使用方向選項 – rctneil

我覺得'orientation'是爲移動設備製作的。你不能在你的電腦顯示器上使用它，因爲沒有肖像取向！ –

我的建議是嘗試與iPhone的CSS。 –

媒體查詢用於桌面屏幕和手機屏幕

回答

相關問題