A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/ja/docs/Web/API/HTMLMetaElement/media below:

HTMLMetaElement: media プãƒãƒ‘ティ - Web API

HTMLMetaElement: media プロパティ

Baseline Widely available

HTMLMetaElement.media プロパティで、theme-color メタデータのメディアを指定することができます。

theme-color プロパティで、このプロパティに対応しているブラウザーやオペレーティングシステムにおいて、ブラウザーのツールバーや UI の色を設定することができます。 media プロパティにより、異なる media 値に対して異なるテーマカラーを設定することができます。

値

文字列です。

例 テーマカラーをダークモードに設定

次の例では、新しい <meta> 要素を作成して name 属性を theme-color に設定します。 content 属性には #3c790a を設定し、media 属性には prefers-color-scheme: dark と設定し、それからその要素を文書の <head> に追加します。 ユーザーがオペレーティングシステムでダークモードを指定している場合、media プロパティを使用して異なる theme-color を設定することができます。

var meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#3c790a";
meta.media = "(prefers-color-scheme: dark)";
document.head.appendChild(meta);
端末の大きさでテーマカラーを設定

ほとんどのメタプロパティは一度しか使用することができません。ただし theme-color は、固有の media 値が提供されていれば、複数回使用することができます。

この例では、theme-color を持つ 2 つの meta 要素を追加しています。1 つはすべての端末用、もう 1 つは小さな画面用です。 media クエリーに一致させる順番が重要ですので、下記に示すように、より詳細なクエリーが文書内で後になるように追加してください。

// すべての端末向けの theme-color を追加
meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = "#ffffff";
document.head.appendChild(meta);

// 小さな端末向けの theme-color を追加
var meta = document.createElement("meta");
meta.name = "theme-color";
meta.media = "(max-width: 600px)";
meta.content = "#000000";
document.head.appendChild(meta);
仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4