Question

我有两个div，我将其称为A＆amp; B.期望的行为是：

如果屏幕宽度小于400像素，则只能看到A.
如果横向屏幕宽度大于400像素，纵向方向小于400像素，则只能显示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＆amp;的iOS设备max-device-width作为纵向值，与当前屏幕方向无关。

2b针对报告min-device-width＆amp;的所有其他设备。 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媒体查询方向和纵向设备宽度逻辑

1 个答案: