最小寬度的iPad媒體查詢也適用於Android設備

Question

我正在編輯其他人的CSS。他們使用iPad的兩種媒體查詢（一種用於肖像，一種用於風景），這些查詢似乎在某些較大的Android手機和平板電腦上造成問題。

我發現如此緊張的是，他們使用的CSS幾乎被所有人推薦，儘管它在Android設備上非常脆弱。

此查詢的功能是： 它使用min-device-width和max-device-width的組合來確定設備是iPad。 它使用'orientation'參數來判斷設備是縱向還是橫向（在iOS設備上，設備寬度總是縱向模式下的寬度，即使設備當前處於橫向模式）。

這是一個似乎是導致問題的CSS：

/* iPad Landscape */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
/* CSS */ 
} 

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

現在的問題是，確定一個最小和最大設備寬度留下了很大的空間被應用到其他設備，因爲這些款式好。寬度在768像素和1024像素之間的任何東西都被視爲iPad。

在我的情況下，樣式指定屏幕底部的自定義按鈕欄正好是768像素寬。還有更多類似的東西。這適用於iPad，但不適用於寬度相似但寬度不同的設備。相關Android設備上的按鈕正在脫落。

所以我現在使用的是：

@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : landscape) { etc } 
@media screen and (device-width: 768px) and (device-height: 1024px) and (orientation : portrait) { etc } 

這似乎正是針對所有的iPad。我瞭解到，即使分辨率較高，所有iPad都具有768像素的「設備寬度」。

所以我很確定我做對了。但由於這是一個很常見的問題，而其他人都在說使用MIN設備寬度和MIN設備高度，所以我仍然很樂意聽到其他人的聲音。

Answer 1

媒體查詢是根據屏幕分辨率定位設備的正確方法。

在另一個幾乎相同的問題上的這個答案最好地解釋它。

https://stackoverflow.com/a/9504571/2620028