Тестирование медиа-запросов программно

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

 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 , а используют стандартную настройку слушателя событий, передавая объект event  MediaQueryListEvent как аргумент функции обратного вызова.

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

Уведомление о завершении запроса

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

mediaQueryList.removeListener(handleOrientationChange);

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

MediaQueryList interface

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
MediaQueryList
Экспериментальная
Chrome Полная поддержка 9Edge Полная поддержка ДаFirefox Полная поддержка 6IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка 18Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 5Samsung Internet Android ?
EventListener objects as parametersChrome Полная поддержка 45Edge ? Firefox Полная поддержка 55IE Нет поддержки НетOpera Нет поддержки НетSafari ? WebView Android Полная поддержка 45Chrome Android Полная поддержка 45Firefox Android Полная поддержка 55Opera Android Нет поддержки НетSafari iOS ? Samsung Internet Android ?
MediaQueryList inheriting from EventTargetChrome Полная поддержка 45Edge Полная поддержка 16Firefox Полная поддержка 55IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка 45Chrome Android Полная поддержка 45Firefox Android Полная поддержка 55Opera Android Полная поддержка ДаSafari iOS Нет поддержки НетSamsung Internet Android ?
addListenerChrome Полная поддержка 9Edge Полная поддержка 12Firefox Полная поддержка 6IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка 18Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 5Samsung Internet Android ?
matchesChrome Полная поддержка 9Edge Полная поддержка 12Firefox Полная поддержка 6IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка 18Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 5Samsung Internet Android ?
mediaChrome Полная поддержка 9Edge Полная поддержка 12Firefox Полная поддержка 6IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка 18Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 5Samsung Internet Android ?
onchangeChrome Полная поддержка 45Edge ? Firefox Полная поддержка 55IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка 45Chrome Android Полная поддержка 45Firefox Android Полная поддержка 55Opera Android Полная поддержка ДаSafari iOS Нет поддержки НетSamsung Internet Android ?
removeListenerChrome Полная поддержка 9Edge Полная поддержка 12Firefox Полная поддержка 6IE Полная поддержка 10Opera Полная поддержка 12.1Safari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка 18Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 5Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.

See also

Метки документа и участники

Внесли вклад в эту страницу: opereverzeva
Обновлялась последний раз: opereverzeva,