最小宽度的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