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

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

Допустим нужно выделить текущий пункт меню отдельным стилем. Иногда, это сделать просто невозможно (в случае Ajax) или сложно из-за структуры меню и тут нам на помощь приходит JavaScript, а точнее jQuery

В этой статье вы узнаете о том, что такое синхронное и асинхронное программирование в JavaScript и как применяя эти знания, работать с Async/Await

Попалась интересная задачка, на баннере нужно было выводить «Акция действует до (тут последний день месяца)», решил сделать это на Javascript, ну чтоб не лазить каждый раз в код для правок, вот что получилось

Заявка на создание сайта / Продвижение сайта

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта
Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта
Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту

Закажите сайт по телефону: +7 (929) 701 21 71

наверх