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

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

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

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 {
        // Изменено на горизонтальный режим
    }
});
	

Похожие материалы

Область видимости переменной — это часть контекста выполнения, в котором эта переменная существует. Область видимости определяет, есть ли у вас доступ к переменной в данном контексте выполнения.

Изучение JavaScript может сбить с толку по множеству причин, и одна из них — акронимы. Чтобы не дать сокращениям сбить вас с толку, в этой статье мы разберём их значения и историю возникновения.

Youtube несколько видео на странице. Как сделать остановку предыдущего видео, при запуске следующего? На сайте расположено на одной странице три видео. При включении нужно чтобы другое видео, если запущено , останавливалось. Как это реализовать?

наверх