iphone - 如何通过媒体查询区分 Android 和 iPad？

Question

在我正在制作的页面中，我正在为移动设备编写一个辅助样式表，它会覆盖第一个样式表的选定部分。

我按以下方式使用媒体查询:

<link rel="stylesheet" href="assets/ui.css">
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="assets/ui_mobile.css" type="text/css">

这适用于 iPhone。我的目标是创建一个查询，如果它是 iPhone 或 Android 就会激活，然后让 iPad 使用标准桌面样式。

当我将它切换到 max-device-width: 800px 时，它会在 iPhone 和 Android 上触发，但也会在 iPad 上触发。它不应该这样做，因为据称 iPad 的最大设备宽度为 780px。但无论出于何种原因，它都是。

我使用了多种不同宽度、高度和纵横比的排列组合，但都无济于事。有谁知道区分这三者的可行方法？

如有任何建议，我们将不胜感激。谢谢!

Answer 1

When I switch it to max-device-width: 800px, it triggers on the iPhone and Android, but also triggers on iPad. It should not be doing this, as the max-device-width of the iPad is allegedly 780px. But it is, for whatever reason.

我认为您误解了 max-device-width 的工作原理。由于 iPad 的 max-device-width 为 780px，因此它低于 800px 限制，与 iPhone 一样有效。