CSS медиа-ориентация запросов и портретная логика ширины устройства

Question

У меня есть два div, которые я буду называть A & B. Желаемое поведение:

1. Если ширина экрана меньше 400 пикселей, должна быть видна только буква A.
2. Если экран в альбомной ориентации, шириной более 400 пикселей, но в портретной ориентации менее 400 пикселей, должен быть виден только B.
3. В противном случае (ширина экрана превышает 400 пикселей в книжной и альбомной ориентациях), должны быть видны как А, так и В.

Второй пункт, который оказывается проблематичным.

Мой текущий подход работает на устройствах iOS, которые всегда сообщают min-device-width &;; max-device-width в качестве портретных значений независимо от текущей ориентации экрана, но не для 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 Sniffing и использования устаревших типов мультимедиа (например, портативных).

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 предназначается для устройств iOS, которые всегда сообщают min-device-width & max-device-width в качестве портретных значений независимо от текущей ориентации экрана.

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; }
}