Браузерная поддержка ориентации (книжная и альбомная)

Question

Какая браузер поддерживает следующие функции?

CSS для определения ориентации экрана:

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

CSS-определение медиа-запроса: http://www.w3.org/TR/css3-mediaqueries/#orientation

С Как определить ориентацию устройства с помощью медиазапросов CSS?

Я посмотрел на Могу ли я использовать. Но он говорит, что поддерживается только для 48% пользователей в Великобритании. Это верно? Или я смотрю не на ту вещь? Меня не интересует Screen.orientation или что-нибудь необычное. Я просто хочу использовать разные стили, когда область просмотра выше, чем она широкая.

РЕДАКТИРОВАТЬ: Я думаю, что ориентация является частью основного медиа-запроса и, следовательно, широко поддерживается (около 98%), см. https://www.w3.org/TR/css3-mediaqueries/

Answer 1

Вот еще один способ задать правила таблицы стилей для альбомной, квадратной и портретной компоновки, когда ширина окна недостаточна.

В этом примере используются 7 и 8, поэтому «квадратные» стили применяются, когда ширина и высота находятся в пределах 1/8 от размера друг друга. Использование 9 и 10 применяет «квадратные» стили, когда ширина и высота находятся в пределах 1/10 друг от друга. Вы должны использовать числа без десятичных знаков.

Фрагмент кода лучше всего работает при просмотре всей страницы.

div {
    display:none;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    text-align:center;
  }

  #instructions {
    display:block;
    top:25%;
  }


  @media (max-aspect-ratio: 8/7) and (min-aspect-ratio: 7/8) {
    /* rules for square-ish layout */
    #square {
      display:block;
    }
  }

  @media (min-aspect-ratio: 8/7) {
    /* rules for landscape layout */
    #landscape {
      display:block;
    }
  }


  @media (max-aspect-ratio: 7/8) {
    /* rules for portrait layout */
    #portrait {
      display:block;
    }
  }

<div id="portrait">
  Portrait
</div>
<div id="square">
  Square
</div>
<div id="landscape">
  Landscape
</div>
<div id="instructions">
  Resize your window to change the aspect and apply different style rules
</div>

Answer 2

Поддержка orientation в медиа-запросах в MDN выглядит в лучшем случае дефицитным. Я бы посоветовал не использовать их для критической реакции, но может быть полезен в качестве экспериментальной функции для тестирования.

Поддержка настольных компьютеров:

Мобильная поддержка: