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

В JavaScript режим ориентации можно обнаружить, используя:

if (window.innerHeight > window.innerWidth) { portrait = true; } else { portrait = false; } 

Однако есть ли способ определить ориентацию только с помощью CSS?

Например. что-то вроде:

 @media only screen and (width > height) { ... } 

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

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

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

 @media all and (orientation:portrait) { /* Style adjustments for portrait mode goes here */ } @media all and (orientation:landscape) { /* Style adjustments for landscape mode goes here */ } 

но похоже, что вам нужно экспериментировать

Я думаю, нам нужно написать более конкретный медиа-запрос. Убедитесь, что вы пишете один мультимедийный запрос, это не должно влиять на другое представление (Mob, Tab, Desk), иначе это может быть проблемой. Я хотел бы предложить написать один базовый мультимедийный запрос для соответствующего устройства, которое будет охватывать как просмотр, так и один запрос на ориентацию, который вы можете использовать для конкретного кода, ориентированного на ориентацию, для его хорошей практики. Нам не нужно одновременно писать запрос на ориентацию медиа. Вы можете ссылаться на мой приведенный ниже пример. Прошу прощения, если мое английское письмо не очень хорошо. Пример:

Для мобильных устройств

 @media screen and (max-width:767px) { ..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view. } @media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) { ..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view. } 

Для планшета

 @media screen and (max-width:1024px){ ..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view. } @media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){ ..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view. } 

рабочий стол

сделайте согласно вашему требованию к дизайну … (:

Спасибо, Jitu

В Javascript лучше использовать screen.width и screen.height . Эти два значения доступны во всех современных браузерах. Они дают реальные размеры экрана, даже если браузер был уменьшен при запуске приложения. window.innerWidth изменяется, когда браузер уменьшен, что не может случиться на мобильных устройствах, но может произойти на ПК и ноутбуках.

Значения screen.width и screen.height изменяются, когда мобильное устройство переворачивается между портретным и альбомным режимами, поэтому можно определить режим, сравнивая значения. Если screen.width больше 1280 пикселей, вы имеете дело с ПК или ноутбуком.

Вы можете создать прослушиватель событий в Javascript, чтобы обнаружить, когда два значения перевернуты. Значения параметра portrait screen.width для концентрации – 320 пикселей (в основном iPhones), 360 пикселей (большинство других телефонов), 768 пикселей (маленькие highcharts) и 800 пикселей (обычные highcharts).

  • Как скрыть запросы ajax с консоли firebug?
  • Есть ли браузер, эквивалентный ClearAuthenticationCache IE?
  • Откройте внешние ссылки в браузере с веб-браузером Android
  • Как реализовать мою собственную схему URI на Android
  • Сколько одновременных запросов AJAX (XmlHttpRequest) разрешено в популярных браузерах?
  • Android просмотреть историю браузера
  • Как подписать апплет Java для использования в браузере?
  • Как веб-браузер всегда отправляет конечную косую черту после имени домена?
  • Программирование на Android: с чего начать создавать простой браузер файлов?
  • Как загрузить несколько файлов с помощью одного HTTP-запроса?
  • Почему Internet Explorer 11 не соблюдает условные комментарии даже при эмуляции режима документа Internet Explorer 8?
  • Давайте будем гением компьютера.