Тестирование медиавыражений программно

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

DOM предоставляет возможности, позволяющие тестировать результат медиавыражений программно, с помощью интерфейса MediaQueryList, его методов и свойств. Однажды, создав объект MediaQueryList вы можете проверить результат выражения или получать уведомление, при изменении результата.

Создание списка медиавыражений

Прежде, чем вы сможете оценить результаты медиавыражений, вам необходимо создать объект MediaQueryList, отражающий выражение. Для этого используется метод window.matchMedia.

Например, настройка списка выражений, который определяет, находится ли устройство в альбомной или книжной ориентации:

js
var mediaQueryList = window.matchMedia("(orientation: portrait)");

Проверка результата выражения

После того, как вы создали свой список медиавыражений, вы можете проверить результат выражения, посмотрев на значение его свойства matches:

js
if (mediaQueryList.matches) {
  /* Окно просмотра в настоящее время находится в книжной ориентации */
} else {
  /* Окно просмотра в настоящее время находится в альбомной ориентации */
}

Получение уведомлений о выражениях

Если вам необходимо постоянно следить за изменениями в результате выражения, эффективнее зарегистрировать обработчик, чем вытаскивать результат выражений. Для этого вызовите метод addListener() объекта MediaQueryList с функцией колбэка, которая вызывается при изменении статуса медиавыражения (например, тест медиавыражения переходит от true к false):

js
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка выражений.
function handleOrientationChange(mql) { ... } // Определение колбэк-функции для обработчика событий.
mediaQueryList.addListener(handleOrientationChange); // Добавление колбэк-функции в качестве обработчика к списку выражений.

handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.

Этот код создаёт список медиавыражений для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.

Функция handleOrientationChange() будет следить за результатом выражения и обрабатывать все, что нам нужно сделать при изменении ориентации:

js
function handleOrientationChange(evt) {
  if (evt.matches) {
    /* Окно просмотра в настоящее время находится в книжной ориентации */
  } else {
    /* Окно просмотра в настоящее время находится в альбомной ориентации */
  }
}

Выше, мы определяем параметры как evt — event объект. Это имеет значение, поскольку новые реализации MediaQueryList обрабатывают события стандартным способом. Они больше не используют нестандартный механизм MediaQueryListListener , а используют стандартную настройку обработчика событий, передавая объект event MediaQueryListEvent как аргумент колбэк-функции.

Этот event объект также включает свойства media и matches, поэтому вы можете запросить эти свойства MediaQueryList путём прямого доступа к нему или доступа к event объекту.

Уведомление о завершении выражения

Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод removeListener() для MediaQueryList, передав ему имя, ранее определённой функции:

js
mediaQueryList.removeListener(handleOrientationChange);

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также