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

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

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

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

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

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

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

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

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

Если вам необходимо постоянно следить за изменениями в результате выражения, эффективнее зарегистрироватьобработчик, чем вытаскивать результат выражений. Для этого вызовите методaddListener() объектаMediaQueryList с функцией колбэка, которая вызывается при изменении статуса медиавыражения (например, тест медиавыражения переходит от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 , а используют стандартную настройку обработчика событий, передаваяобъект eventMediaQueryListEvent как аргумент колбэк-функции.

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

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

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

mediaQueryList.removeListener(handleOrientationChange);

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

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

• Media queries
• window.matchMedia()
• MediaQueryList
• MediaQueryListEvent