HTMLMetaElement：media 属性
HTMLMetaElement.media 属性允许为 theme-color 元数据指定媒体。
theme-color 属性允许在支持此属性的浏览器和操作系统中设置浏览器工具栏或 UI 的颜色。media 属性允许为不同的 media 值设置不同的主题颜色。
值
字符串。
示例
设置深色模式的主题颜色
以下示例创建一个新的 <meta> 元素，其 name 属性设置为 theme-color。content 属性设置为 #3c790a，media 属性设置为 prefers-color-scheme: dark，并将该元素附加到文档的 <head> 中。当用户在其操作系统中指定了深色模式时，可以使用 media 属性设置不同的 theme-color
js
const meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#3c790a";
meta.media = "(prefers-color-scheme: dark)";
document.head.appendChild(meta);
按设备尺寸设置主题颜色
大多数元属性只能使用一次。但是，如果提供了唯一的 media 值，则 theme-color 可以使用多次。
此示例添加了两个具有 theme-color 的元元素；一个用于所有设备，另一个用于小屏幕。匹配 media 查询的顺序很重要，因此更具体的查询应在文档中稍后添加，如下所示
js
// 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 |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。