Меню ×
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. Реализуем это без использования плагинов, сначала при помощи библиотеки jQuery, а затем на чистом JavaScript

Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка "Наверх". Если по ней кликнуть, то начинается плавная промотка полосы прокрутки до самого верха. Как реализовать плавную кнопку "Наверх" через jQuery, Вы и узнаете из этой статьи.

В данном материале рассмотрим, как сделать склонение окончаний при помощи Javascript. Возьмите готовую функцию решающую задачу со склонениями и посмотрите варианты её применения.

наверх