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
// 为所有设备添加主题色
const meta1 = document.createElement("meta");
meta1.name = "theme-color";
meta1.content = "#ffffff";
document.head.appendChild(meta1);
// 为小设备添加主题色
const meta2 = document.createElement("meta");
meta2.name = "theme-color";
meta2.media = "(max-width: 600px)";
meta2.content = "#000000";
document.head.appendChild(meta2);
规范
Specification |
---|
HTML Standard # dom-meta-media |
浏览器兼容性
BCD tables only load in the browser