меню

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

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, 5 рекомендаций которые улучшат Ваш код.

Написание хорошо переиспользуемого кода иногда может быть сложным. Мы можем программировать на разных языках и придерживаться определенных ограничений или шаблонов, которые несут смысл от конкретного контекста.

Как исправить ошибку «RangeError: Invalid time value» при вызове метода toISOString даты JavaScript?

В этой статье мы рассмотрим, как исправить ошибку «RangeError: Invalid time value» при вызове toISOString метода даты JavaScript.

Что такое ECMAScript и чем это отличается от JavaScript

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

Как избежать повторной загрузки контента Jquery + Ajax + JSON

Как избежать повторной загрузки контента Jquery + Ajax + JSON. Для работы Front - End'а доступны были по ТЗ только таковы инструменты Java Script, JQuery, Ajax, JSON и конечно же HTML + CSS.

Оформление заявки

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

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

КП на создание сайта Коммерческое предложение на созданеи сайта

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

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

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