JavaScript - отслеживание изменения ориентации на мобильных устройствах

Если Ваше мобильное приложение поддерживает только портретную или только горизонтальную ориентацию, то есть большая вероятность того, что некоторые элементы придётся менять, в зависимости от положения устройства. Даже если в дизайне Вы использовали "резиновую" верстку, то всё равно необходимо сделать некоторые изменения. Есть несколько вариантов, как отловить изменение ориентации мобильного устройства.

Событие orientationchange

Событие orientationchange является событием mobile API; обычное отслеживание переворота объекта window:

 
// Прослушка события смены ориентации
window.addEventListener("orientationchange", function() {
    // Выводим числовое значение ориентации
    alert(window.orientation);
}, false);
 

Значение переменной window.orientation будет изменяться от 0 до -90, когда устройство в портретном режиме переворачивается по часовой стрелке в горизонтальный режим. Если поворот происходит против часовой стрелки, то значение window.orientation меняется от 0 до 90.

Событие resize

Некоторые устройства не поддерживают событие orientationchange, поэтому можно отловить изменение размера окна:

 
// Прослушиваем событие изменения размера страницы
window.addEventListener("resize", function() {
    // Здесь получаем размеры экрана (inner/outerWidth, inner/outerHeight)

}, false);
  

Событие resize менее очевидно, чем orientationchange, но зато работает так же хорошо.

Размеры экрана

Существуют несколько свойств, получаемых из объекта window, с помощью которых можно узнать реальный и "виртуальный" размеры дисплея:

• outerWidth, outerHeight: реальное разрешение экрана (например: 320x356 на iPhone в портретном режиме)
• innerWidth, innerHeight: виртуальное значение (например: 980x1091 на iPhone в портретном режиме)

Само собой они не вернут Вам текущую ориентацию устройства, но с помощью простых математических вычислений, можно её получить, найдя самую широкую сторону дисплея.

Медиа запросы CSS

Отлично справляется с задачей поиска ориентации устройства CSS со своими медиа запросами:

 
/* портретная ориентация */
@media screen and (orientation:portrait) {
    /* Стили для портретной */
}
/* горизонтальная ориентация */
@media screen and (orientation:landscape) {
    /* стили для горизонтальной */
}
 

matchMedia

Нативный метод window.matchMedia позволяет реализовать media-запросы для поиска ориентации устройства:

 
var mql = window.matchMedia("(orientation: portrait)");

if(mql.matches) {  
    // Портретная ориентация
} else {  
    // Горизонтальная ориентация
}

// Прослушка события изменения ориентации
mql.addListener(function(m) {
    if(m.matches) {
        // Изменено на портретный режим
    }
    else {
        // Изменено на горизонтальный режим
    }
});