我正在编辑其他人的 CSS。他们对 iPad 使用了两种媒体查询(一种用于纵向，一种用于横向)，这似乎在某些较大的 Android 手机和平板手机上引起了问题。
我觉得很奇怪的是，他们使用的 CSS 被几乎所有人推荐，尽管它在 Android 设备上非常容易受到攻击。
这个查询的作用是: 它结合使用 min-device-width 和 max-device-width 来确定该设备是 iPad。 它使用“方向”参数来确定设备是纵向还是横向(在 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，我仍然很高兴听到其他人就此发表意见。
最佳答案
关于android - 具有最小宽度的 iPad 媒体查询也适用于 Android 设备，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24431226/