css - Ipad 和 Android 平板电脑的媒体查询问题

Question

我在使用 Ipad 和 Android 平板电脑媒体查询时遇到问题，尤其是在横向模式下。

我需要一些有关正确媒体查询的帮助。

这是我正在使用的媒体查询：

安卓景观：

@media only screen and (min-device-width : 800px) and (max-device-width: 1280px) and (orientation : landscape) {}

iPad风景：

@media only screen and (min-device-width : 768px) and (max-device-width: 1024px) and (orientation : landscape) {}

Answer 1

利用

@media (min-width : 800px) and (max-width: 1280px) {}
@media (min-width : 768px) and (max-width: 1024px) {}

以供参考

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Answer 2

这适用于 android 选项卡：

@media（最小设备宽度：600 像素）和（最大设备宽度：1024 像素）和（方向：横向）{}

和

@media (min-device-width : 600px) and (max-device-width: 1024px) and (orientation : portrait) {}