我正在编辑其他人的 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，我仍然很高兴听到其他人对此的看法。