媒體查詢最小寬度：1000px包括iPad風景

如何定位寬度超過1000像素的設備？也就是說，包括橫向模式和大多數桌面的iPad，但不包括縱向模式的iPad。媒體查詢最小寬度：1000px包括iPad風景

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

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
}

不過，我寧願如果我的媒體查詢可以用在什麼寬度的內容提示佈局的變化，而不是通過特定設備的形狀。

來源

2013-10-09 Fredrik P

如果我正確理解您的問題，則根本不需要嘗試和定位特定設備。

在你的主要CSS只是包括：

@media (min-width: 1000px) { 

/* CSS styles for viewports 1000px and up */ 

}

，並在頁面的頭部包括

<meta name="viewport" content="width=device-width, initial-scale=1.0">

編輯
這裏是工作的例子，你可以在iPad上檢查：
直播：http://fiddle.jshell.net/panchroma/Bn4ah/show/
代碼視圖：http://fiddle.jshell.net/panchroma/Bn4ah

祝你好運！

來源

2013-10-09 18:56:20

在橫向模式下，'width = device-width'是否阻止iPad報告寬度= 768px和高度= 1024px？ –

@FredrikP，請參閱我的編輯。有了CSS媒體查詢，我發現如果你保持簡單並且不想過，你會得到回報。希望這有助於 –

謝謝你的小提琴。我設法弄到一臺iPad並檢查了它。（我真的應該買一個。）它就像你說的那樣工作。 –

雖然您從CSS-Tricks引用的文章是非常方便的參考資料（Chris Coyier是我的書呆子偶像），但它可能有點誤導。在他們核心的媒體查詢只是看起來像是if語句，如果整個語句的計算結果爲true，則按照正常的級聯規則應用相應的樣式表或樣式規則。

讓我們看一個共同的媒體查詢：

@media screen and (min-width: 768px) { ... }

通知的screen參數。它沒有提到設備寬度和瀏覽器鑲邊。閱讀簡單的英語，它說：「如果我們正在處理的介質是屏幕，如果該屏幕是最小的768px或更大，使用這些樣式。

所以，回答你問題：目標屏幕是比1000像素寬較大，試試這個：

@media screen and (min-width: 1000px) { ... }

只要記住，你是針對廣泛的所有屏幕至少1000像素如果您需要針對特定的設備。我建議使用JavaScript來處理特定的UserAgent定位。

來源

2013-10-09 20:09:33 MikeZ

從我聽說，似乎iPad總是報告其寬度爲768px，高度爲1024px，無論是橫向還是縱向模式。見例如http://stackoverflow.com/questions/7726411/min-width-media-query-not-working-on-ipad#answer-7758356。這就是爲什麼我首先發布我的問題（也許應該包含在原始問題中）的原因。 –

+1回答這個問題。大衛得到了解決我的進一步問題的答案。 –

媒體查詢最小寬度：1000px包括iPad風景

回答

相關問題