Определение размера экрана

Роль размера экрана в работе картографических интерфейсов

Визуализация карт в браузере напрямую зависит от доступного пространства области отображения. В контексте Google Maps JavaScript API корректное определение размеров экрана и контейнера карты влияет на:

  • точность центрирования карты;
  • корректное масштабирование элементов управления;
  • перерасчёт тайлов при изменении геометрии контейнера;
  • адаптацию интерфейса под мобильные и десктопные устройства;
  • производительность при динамическом изменении размеров.

Карты рендерятся внутри DOM-элемента, и любые изменения размеров этого элемента требуют синхронизации внутреннего состояния карты с текущей геометрией.

Базовые способы определения размеров экрана

Геометрия окна браузера

Основные параметры, определяющие размер области отображения:

  • window.innerWidth — ширина видимой области окна;
  • window.innerHeight — высота видимой области окна;
  • document.documentElement.clientWidth — ширина viewport без полосы прокрутки;
  • document.documentElement.clientHeight — высота viewport без полосы прокрутки.

Эти значения используются для построения адаптивной логики отображения карты.

Пример вычисления доступного пространства:

const width = window.innerWidth;
const height = window.innerHeight;

Размер контейнера карты

В практических реализациях критически важен не размер окна, а размер DOM-элемента, в котором размещается карта.

const mapContainer = document.getElementById('map');
const rect = mapContainer.getBoundingClientRect();

const width = rect.width;
const height = rect.height;

Именно эти значения определяют фактическую область рендеринга тайлов и элементов управления.

Изменение размера и реакция карты

Событие resize в Google Maps API

При изменении размеров контейнера необходимо уведомить карту о необходимости перерасчёта отображения.

В Google Maps JavaScript API для этого используется событие:

google.maps.event.trigger(map, 'resize');

После вызова требуется корректировка центра карты:

map.setCenter(currentCenter);

Без повторной установки центра карта может визуально смещаться.

Динамическое изменение контейнера

При изменении layout страницы (например, раскрытие боковой панели) контейнер карты может изменять размеры без перезагрузки страницы.

Типичный сценарий:

function updateMapSize() {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(map.getCenter());
}

ResizeObserver и современные подходы

Наблюдение за изменением размеров DOM

Современный API ResizeObserver позволяет отслеживать изменения контейнера без обработки событий окна.

const observer = new ResizeObserver(() => {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(map.getCenter());
});

observer.observe(document.getElementById('map'));

Этот подход обеспечивает точную реакцию на изменения верстки, включая:

  • появление боковых панелей;
  • изменение flex/grid раскладки;
  • динамическую подгрузку интерфейсных блоков.

Учет плотности пикселей экрана

devicePixelRatio и качество рендеринга

Параметр window.devicePixelRatio влияет на отображение карты на экранах высокой плотности.

const ratio = window.devicePixelRatio;

При высоких значениях (Retina-дисплеи) карта автоматически подгружает более детализированные тайлы, но логика адаптации интерфейса может учитывать этот параметр при расчёте размеров UI-элементов.

Адаптивная верстка контейнера карты

CSS-ограничения

Размер карты часто определяется через CSS:

#map {
  width: 100%;
  height: 100vh;
}

или через flex-контейнер:

.layout {
  display: flex;
  height: 100vh;
}

#map {
  flex: 1;
}

Любое изменение этих параметров автоматически влияет на геометрию карты.

Breakpoints и перестройка интерфейса

При адаптивной верстке используются медиазапросы:

@media (max-width: 768px) {
  #sidebar {
    display: none;
  }

  #map {
    width: 100%;
  }
}

Изменение breakpoints может требовать повторной синхронизации карты через resize.

Полноэкранный режим и его особенности

При переходе в fullscreen режим изменяется не только размер окна, но и контекст рендеринга.

document.documentElement.requestFullscreen();
google.maps.event.trigger(map, 'resize');
map.setCenter(map.getCenter());

В fullscreen часто меняется поведение UI-элементов управления, так как карта занимает всю доступную область viewport.

Синхронизация центра карты с изменением размеров

Стабилизация видимой области

При изменении размеров контейнера карта может смещать центр. Для предотвращения этого применяется сохранение состояния:

const center = map.getCenter();

google.maps.event.trigger(map, 'resize');

map.setCenter(center);

Этот подход сохраняет визуальный контекст при изменении геометрии.

Практическая модель расчёта адаптации

В сложных интерфейсах применяется комбинированная стратегия:

  1. определение размеров контейнера через getBoundingClientRect;
  2. отслеживание изменений через ResizeObserver;
  3. триггер resize в Google Maps JavaScript API;
  4. восстановление центра и масштаба;
  5. адаптация UI-слоёв поверх карты.

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

На мобильных устройствах размер экрана динамически меняется из-за:

  • появления адресной строки браузера;
  • изменения ориентации устройства;
  • виртуальной клавиатуры.

Обработка ориентации:

window.addEventListener('orientationchange', () => {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(map.getCenter());
});

Влияние изменения размера на производительность

Частые вызовы перерасчёта карты могут влиять на производительность:

  • повторная отрисовка тайлов;
  • перерасчёт слоёв маркеров;
  • пересборка интерактивных элементов.

Оптимизация достигается через:

  • debounce обработчиков resize;
  • использование ResizeObserver вместо событий scroll/resize окна;
  • минимизацию вызовов setCenter.

Связь с архитектурой веб-приложения

В приложениях с компонентной архитектурой (React, Vue, Angular) карта часто является изолированным модулем, реагирующим на изменения пропсов контейнера.

Логика взаимодействия строится вокруг:

  • наблюдения за DOM;
  • синхронизации состояния карты;
  • разделения ответственности между UI и картографическим слоем;
  • минимизации прямого взаимодействия с глобальными событиями окна.
Оглавление