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 报告的宽度和高度是相同的，无论方向如何。

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

希望这会有所帮助。