Как определить ориентацию устройства с помощью медиазапросов 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 определение медиа-запроса находится по адресу 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.

}

рабочий стол

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

Спасибо джиту

Я бы пошел на соотношение сторон, это предлагает гораздо больше возможностей.

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
    ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

И ориентация, и соотношение сторон зависят от фактического размера области просмотра и не имеют ничего общего с ориентацией самого устройства.

Подробнее: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

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

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

Вы можете создать слушатель событий в Javascript, чтобы определить, когда два значения перевернуты. Значения портретного экрана: ширина экрана составляет 320 пикселей (в основном iPhone), 360 пикселей (большинство других телефонов), 768 пикселей (маленькие планшеты) и 800 пикселей (обычные планшеты).