0

我有两个 div，我将其称为 A & B。所需的行为是：

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

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

我目前的方法适用于 iOS 设备，无论当前屏幕方向如何，它总是将min-device-width&max-device-width作为纵向值device-width报告，但不适用于 android 和其他值随方向变化的其他设备：

/* 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 嗅探以及使用已弃用的媒体类型（例如手持设备）。

4

1 回答 1

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; }
}
于 2015-08-28T08:58:16.263 回答