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 |
瀏覽器相容性
載入中…