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 */
}

现在问题是定义最小和最大设备宽度为这些样式留下了很大的空间来应用于其他设备。任何宽度在768px和1024px之间的东西都被视为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-device-width和MIN-device-height，我仍然很高兴听到其他人这样做。

Answer 1

媒体查询是根据屏幕分辨率定位设备的正确方法。

关于另一个几乎完全相同的问题的答案解释得最好。

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

具有最小宽度的iPad的媒体查询也适用于Android设备

1 个答案: