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);
按设备尺寸设置主题颜色
大多数 meta 属性只能使用一次。但是，如果提供了唯一的 media 值，theme-color 可以使用多次。
此示例添加了两个具有 theme-color 的 meta 元素；一个用于所有设备，另一个用于小屏幕。匹配 media 查询的顺序很重要，因此应在文档中稍后添加更具体的查询，如下所示：
js
// Add a theme-color for all devices
const meta1 = document.createElement("meta");
meta1.name = "theme-color";
meta1.content = "white";
document.head.appendChild(meta1);
// Add a theme-color for small devices
const meta2 = document.createElement("meta");
meta2.name = "theme-color";
meta2.media = "(width <= 600px)";
meta2.content = "black";
document.head.appendChild(meta2);
规范
| 规范 |
|---|
| HTML # dom-meta-media |
浏览器兼容性
加载中…