HTMLMetaElement: свойство media
Свойство HTMLMetaElement.media позволяет задать тип носителя для theme-color метаданных.
Свойство theme-color позволяет установить цвет панели инструментов или пользовательского интерфейса браузера в браузерах и операционных системах, поддерживающих это свойство. Свойство media позволяет задать разные цветовые темы для разных media значений.
Значение
Строка.
Примеры
Установка цветовой темы для тёмного режима
В следующем примере создаётся новый элемент <meta> с атрибутом name установленным на theme-color. Атрибут content установлен на #3c790a, атрибут media установлен на prefers-color-scheme: dark, и элемент добавляется в документ <head>. Когда пользователь в своей операционной системе выбрал тёмный режим, свойство media может быть использовано для установки другой theme-color:
const meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#3c790a";
meta.media = "(prefers-color-scheme: dark)";
document.head.appendChild(meta);
Установка цветовых тем в зависимости от размера устройства
Большинство мета-свойств можно использовать только один раз. Однако, theme-color можно использовать несколько раз, если предоставлены уникальные значения media.
В этом примере добавляются два элемента meta с theme-color; один для всех устройств, а другой для небольших экранов. Порядок соответствия запросу media имеет значение, поэтому более конкретный запрос должен быть добавлен позже в документе, как показано ниже:
// Add a theme-color for all devices
const meta1 = document.createElement("meta");
meta1.name = "theme-color";
meta1.content = "#ffffff";
document.head.appendChild(meta1);
// Add a theme-color for small devices
const meta2 = document.createElement("meta");
meta2.name = "theme-color";
meta2.media = "(max-width: 600px)";
meta2.content = "#000000";
document.head.appendChild(meta2);
Спецификации
| Спецификация |
|---|
| HTML # dom-meta-media |
Совместимость с браузерами
| Рабочий стол | Мобильный | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
media |
93 | 93 | 106 | 79 | 15 | 93 | 106 | 66 | 15 | 17.0 | 93 |
См. также
© 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/HTMLMetaElement/media
