MediaQueryList: свойство media
Базовая Широко поддерживается
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
Свойство media только для чтения интерфейса MediaQueryList — это строка, представляющая сериализованный запрос к медиа.
Значение
Строка, представляющая сериализованный запрос к медиа.
Примеры
В этом примере выполняется запрос к медиа (max-width: 600px) и отображается значение свойства MediaQueryList результата media в <span>.
JavaScript
let mql = window.matchMedia("(max-width: 600px)");
document.querySelector(".mq-value").innerText = mql.media;
Код JavaScript передает запрос к медиа для сопоставления в matchMedia() для его компиляции, затем устанавливает innerText объекта <span> в значение свойства media результата.
HTML
<span class="mq-value"></span>
<span> для получения вывода.
Результат
Спецификации
| Спецификация |
|---|
| CSSOM View Module # dom-mediaquerylist-media |
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
media |
9 | 12 | 6 | 12.1 | 5.1 | 18 | 6 | 12.1 | 5 | 1.0 | ≤37 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/media
