css - CSS 媒体查询 max-width 和 ipad

Question

我有一套规则想应用于所有小于 960 像素宽的屏幕。

显而易见的是：

@media only screen and (max-width : 959px)

但是，这在 iPad 处于纵向模式时会失败。我读过 iPad 报告其宽度和高度相同，无论方向如何。

是否有一种标准方法可以确保 iPad（或其他使用与 iPad 相同逻辑的设备）尊重正在查看的实际宽度？

显然，我更愿意避免“特定于 iPad”的规则或方向查询——查询应该适用于任何小于 960 像素宽的屏幕。

谢谢。

Answer 1

尝试@media only screen and (max-device-width : 1024px)改用。这应该涵盖横向或纵向的 iPad。

我读过 iPad 报告其宽度和高度相同，无论方向如何。

这很棘手。max-device-width无论方向如何，iPad 都会报告相同的内容。但是，它正确地尊重max-width不同方向/宽度的不同。设备是不变的部分。

希望这可以帮助。