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

159

В JavaScript режим ориентации можно определить с помощью:

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

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

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

@media only screen and (width > height) { ... }
Francesco
источник

Ответы:

435

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

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

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

Ричард Шнайдер
источник
66
Примечание. Это значение не соответствует фактической ориентации устройства. Открытие программной клавиатуры на большинстве устройств в портретной ориентации приведет к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.
Иоганн Комбринк
9
@JohannCombrink Действительно важно, что вы упомянули об этом. Открытие клавиатуры испортит дизайн. Хорошо, вы указываете это.
lowtechsun
Ссылка для комментария @ JohannCombrink: stackoverflow.com/q/8883163/363448
ndequeker
4
Может быть неплохо применять другой стиль, когда клавиатура выдвинута, потому что видимая область обычно больше подходит для стиля, который применяется в ландшафтном режиме. Так что не может быть облом.
Мухаммед бин Юсрат
Мне нравится комментарий Мухаммеда: если программная клавиатура приводит к тому, что область просмотра становится короче, чем она широкая, следовательно, область просмотра будет иметь альбомную ориентацию (даже если вы обычно держите физическое устройство). На мой взгляд, CSS работает так, как задумано.
Бенни
36
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

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

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

mistagrooves
источник
1
Ориентация зависит от устройства. Некоторые планшеты сообщают об ориентации = 0 в ландшафтном режиме. iPhone сообщают иначе, чем Samsung Galaxy.
BlackMagic
21

Я думаю, что нам нужно написать более конкретный медиа-запрос. Убедитесь, что если вы пишете один медиа-запрос, он не должен влиять на другое представление (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
источник
4

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

/* 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

BastianBalthasarBux
источник
0

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

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

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

Черная магия
источник
Важно отметить , что IOS НЕ переворачивать screen.widthи screen.heightзначения , когда iPhone повернут. Он всегда сообщает одинаковые значения. Вы должны использовать window.orientationсвойство, чтобы определить, было ли устройство повернуто ... (значение будет 90 или -90 для ландшафтного режима.)
interDist