Работа с ориентацией экрана

Zepto.js — облегчённая библиотека, ориентированная на мобильные браузеры, и её возможности удобно использовать для управления поведением интерфейса при изменении ориентации экрана устройства. В мобильной разработке критично отслеживать события поворота экрана и адаптировать под них стили и расположение элементов.

События изменения ориентации

Основным событием, связанным с ориентацией экрана, является orientationchange. Zepto позволяет легко навешивать обработчики на это событие с помощью метода .on():

$(window).on('orientationchange', function(event) {
    console.log('Изменение ориентации: ', window.orientation);
});

Ключевой момент: window.orientation возвращает числовое значение, указывающее текущую ориентацию устройства:

  • 0 — портретная ориентация, устройство вертикально;
  • 90 — альбомная ориентация, устройство повернуто вправо;
  • -90 — альбомная ориентация, устройство повернуто влево;
  • 180 — портретная ориентация, устройство перевёрнуто.

Практическое применение

Событие orientationchange обычно используется для адаптации интерфейса под новую ориентацию:

$(window).on('orientationchange', function() {
    if (window.orientation === 0 || window.orientation === 180) {
        $('body').addClass('portrait').removeClass('landscape');
    } else {
        $('body').addClass('landscape').removeClass('portrait');
    }
});

В данном примере класс portrait применяется при вертикальном положении, а landscape — при горизонтальном. Эти классы позволяют управлять CSS-правилами для различных ориентаций без дублирования кода.

Обновление размеров и перерасчёт макета

При изменении ориентации часто требуется перерасчёт размеров элементов. В Zepto для этого используется событие resize:

$(window).on('resize', function() {
    var width = $(window).width();
    var height = $(window).height();
    $('#container').css({
        width: width * 0.9,
        height: height * 0.8
    });
});

Важно учитывать, что orientationchange может срабатывать перед завершением изменения размеров окна, поэтому иногда рекомендуется сочетать оба события:

function adjustLayout() {
    var width = $(window).width();
    var height = $(window).height();
    $('#main-content').css({ width: width, height: height });
}

$(window).on('orientationchange resize', adjustLayout);

Определение ориентации через Zepto

Zepto не имеет встроенного метода для определения ориентации, но можно создать удобную функцию:

function getOrientation() {
    return (window.orientation === 0 || window.orientation === 180) ? 'portrait' : 'landscape';
}

$(window).on('orientationchange', function() {
    var orientation = getOrientation();
    console.log('Текущая ориентация:', orientation);
});

Такой подход позволяет использовать ориентацию как условие для изменения интерфейса, подгрузки элементов или применения анимаций.

Особенности мобильных браузеров

  1. iOS Safari: событие orientationchange срабатывает сразу после физического поворота, но размеры окна могут изменяться с небольшой задержкой. Для точного расчёта размеров стоит использовать setTimeout с небольшой задержкой.
  2. Android WebView и Chrome: поведение схоже с iOS, однако некоторые старые версии браузеров могут некорректно возвращать значения window.orientation. В таких случаях целесообразно дополнительно проверять соотношение ширины и высоты:
function detectOrientation() {
    return $(window).width() > $(window).height() ? 'landscape' : 'portrait';
}
  1. Поворот и CSS-трансформации: при использовании трансформаций (rotate) нужно учитывать физическое изменение размеров контейнеров, чтобы избежать неправильного позиционирования элементов.

Рекомендации по производительности

  • Избегать тяжелых вычислений внутри обработчиков событий orientationchange и resize.
  • Использовать requestAnimationFrame или setTimeout для отложенного выполнения перерасчётов.
  • Ограничивать количество DOM-операций: лучше добавлять/удалять классы, чем динамически менять отдельные стили каждого элемента.

Пример комплексного подхода

function updateLayout() {
    var orientation = getOrientation();
    $('body').attr('data-orientation', orientation);
    
    var width = $(window).width();
    var height = $(window).height();
    
    $('#header').css('height', height * 0.1);
    $('#content').css({
        width: width * 0.95,
        height: height * 0.8
    });
    $('#footer').css('height', height * 0.1);
}

$(window).on('orientationchange resize', function() {
    setTimeout(updateLayout, 100);
});

$(document).ready(updateLayout);

В этом примере:

  • Применяется единая функция для адаптации всех блоков страницы.
  • Используется data-атрибут для хранения текущей ориентации, что упрощает CSS-правила.
  • Отложенный вызов через setTimeout учитывает задержку изменения размеров окна после поворота.

Заключение по практическому использованию

Работа с ориентацией в Zepto базируется на двух ключевых событиях: orientationchange и resize. Объединение их использования позволяет корректно адаптировать интерфейс, минимизировать баги на разных мобильных устройствах и поддерживать отзывчивый дизайн. Простые утилитарные функции, такие как определение ориентации и управление классами CSS, значительно упрощают код и повышают его читаемость.

Оглавление