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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

mediaQueryList.removeListener(handleOrientationChange);

Поддержка браузеров

MediaQueryList interface

BCD tables only load in the browser

See also