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

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

134 голосов
/ 20 апреля 2011

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

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

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

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

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

Ответы [ 4 ]

380 голосов
/ 20 апреля 2011

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

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

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

32 голосов
/ 20 апреля 2011 
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

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

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

13 голосов
/ 30 июля 2015

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

}

Рабочий стол

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

Спасибо, Джиту

0 голосов
/ 02 сентября 2015

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

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

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

...