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

Прежде, чем вы сможете оценить результаты медиавыражений, вам необходимо создать объект 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 (en-US) обрабатывают события стандартным способом. Они больше не используют нестандартный механизм MediaQueryListListener (en-US) , а используют стандартную настройку обработчика событий, передавая объект event MediaQueryListEvent (en-US) как аргумент колбэк-функции.

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

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

mediaQueryList.removeListener(handleOrientationChange);

• Media queries (en-US)
• window.matchMedia()
• MediaQueryList (en-US)
• MediaQueryListEvent (en-US)