CSS 媒体查询方向和纵向设备宽度逻辑

Question

我有两个 div，我将它们称为 A 和 B。期望的行为是：

1. 如果屏幕宽度小于 400 像素，则应该只有 A 可见。
2. 如果屏幕是横向的，宽度大于 400 像素，纵向小于 400 像素，则应该只有 B 可见。
3. 否则（屏幕宽度在纵向和横向均大于 400 像素），A 和 B 都应该可见。

第二个项目被证明是有问题的。

我目前的方法适用于 iOS 设备，which always report min-device-width & max-device-width as the portrait values，无论当前屏幕方向如何，但不适用于 android 和其他设备，device-width 值随方向变化：

/* item 3 */
.a, .b {
  display: block;
}

/* item 2 */
@media only screen and (min-width: 400px) and (max-device-width: 400px) and (orientation: landscape) {
  .a { display: none; }
}

/* item 1 */
@media only screen and (max-width: 400px) {
  .b { display: none }
}

是否可以仅在媒体查询中实现此行为，使其适用于所有设备？

如果可能，我希望避免使用 JavaScript、UA 嗅探以及使用 deprecated media types（例如手持设备）。

Answer 1

一种解决方案是为项目 2 添加第二个媒体查询，以 max-device-height 为目标：

/* item 2a - iOS */
@media only screen and (min-width: 400px) and (max-device-width: 400px) {
  .a { display: none; }
}
/* item 2b - everything else */
@media only screen and (min-width: 400px) and (max-device-height: 400px) {
  .a { display: none; }
}

2a 面向始终将min-device-width 和max-device-width 报告为纵向值的iOS 设备，无论当前屏幕方向如何。

2b 针对所有其他根据当前屏幕方向报告min-device-width 和max-device-width 的设备。所以如果屏幕方向是横向，那么max-device-height代表纵向屏幕宽度。

这些媒体查询也可以与, 结合使用：

/* item 2 */
@media only screen and (min-width: 400px) and (max-device-width: 400px) and (orientation: landscape), only screen and (min-width: 400px) and (max-device-hieght: 400px) and (orientation: landscape) {
  .a { display: none; }
}