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

Question

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

如果屏幕宽度小于 400px，则只有 A 可见。
如果横向屏幕，宽度大于 400px，但纵向小于 400px，则只有 B 应该可见。
否则（纵向和横向的屏幕宽度都大于 400px），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; }
}

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

CSS media query orientation and portrait device-width logic

css

orientation

media-queries

device-width