Почему не работает альбомный медиа запрос?

Question

[copal]

Почему портретный работает, а альбомный нет? Пример на jsbin. И самое главное, как сохранив функционал его починить?

Comments

[Евгений]

Проверил на своем мониторе, в настройках выбрал ориентацию альбомную, все работает

[copal]

Евгений: странно. У меня когда ширина больше высоты, то просто маленькая полоска на всю ширину вместо квадрата.

[Алексей A]

copal: Да, просто полоска. Но, можно обычные свойства писать как бы для альбомного режима, а при переходе в портретный режим уже менять. Потом при отмене портретного режима всё восстановиться само.

Answer 1

[GreatRash]

А десктоп, вроде как, не отдаёт инфу об ориентации.

Comments

[Евгений]

Не правда, ориентация определятся от пропорций ширины и высоты
Если ширина больше высоты, то альбомная, если наоборот, то портретная.

[GreatRash]

Евгений: В мобильных браузерах есть свойство window.orientation, есть мнение, что медиа-запросы опираются на это свойство (т.е. на детекторы телефона), а не на ширину окна.

[copal]

GreatRash: а как тогда узнать что ширина больше высоты и наоборот?

[Евгений]

GreatRash: Из спецификации:
The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.