最新のブラウザでは、アイコンやアドレスバーの色などの特定のコンポーネントを簡単にカスタマイズでき、カスタムタイルなどを追加することもできます。ちょっとした工夫を加えることで、エンゲージメントを高め、ユーザーをサイトに呼び戻すことができます。
最新のブラウザでは、アイコンやアドレスバーの色などの特定のコンポーネントを簡単にカスタマイズでき、カスタムタイルなどを追加することもできます。ちょっとした工夫を加えることで、エンゲージメントを高め、ユーザーをサイトに呼び戻すことができます。
優れたアイコンとタイルを提供する
ユーザーがウェブページにアクセスすると、ブラウザは HTML からアイコンを取得しようとします。このアイコンは、ブラウザタブ、最近使ったアプリの切り替え、新しい（または最近アクセスした）タブページなど、さまざまな場所に表示されます。
高画質の画像を掲載すると、サイトがユーザーの目に留まりやすくなり、 サイトを見つけてもらいやすくなります
すべてのブラウザを完全にサポートするには、<head> にいくつかのタグを追加する必要があります
要素を追加します。
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome と Opera
Chrome と Opera では icon.png を使用します。
クリックします。自動スケーリングを回避するには、追加の構成で
sizes 属性を指定します。
Safari
Safari でも rel 属性 apple-touch-icon を指定した <link> タグを使用して、
ホーム画面のアイコンを示します。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
apple-touch-icon には、180 ピクセルまたは 192 ピクセルの正方形の不透明な PNG が最適です。
sizes 属性を使用して複数のバージョンを含めることはおすすめしません。
これまで iOS 版 Safari では、-precomposed キーワードの使用が考慮されず、
視覚効果を追加できますが、iOS 7 以降では不要になりました。
Internet Explorer と Windows Phone
Windows 8 の新しいホーム画面では、4 種類のレイアウトに対応 4 つのアイコンが必要です。関連するメタは省略できます 特定のサイズをサポートしたくない場合に タグを追加することをおすすめします
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Internet Explorer のタイル
Microsoft の「固定サイト」「ライブタイル」の回転他社をはるかに上回る 使用されるため、このガイドでは扱いません。詳細とお申し込みについては MSDN の ライブタイルの作成方法をご覧ください。
ブラウザ要素の色
さまざまな meta 要素を使用して、ブラウザをカスタマイズし、
統合できますなお、一部のブラウザは特定のデバイスでしか
プラットフォームやブラウザを使用できますが、これらを使用するとエクスペリエンスが大幅に向上します。
Chrome、Firefox OS、Safari、Internet Explorer、Opera Coast では メタタグを使用して、ブラウザの要素やプラットフォームの色も自動的に調整します。
Chrome と Opera の Meta テーマカラー
Android 版 Chrome のテーマカラーを指定するには、メタテーマカラーを使用します。
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari 固有のスタイル
Safari では、ステータスバーのスタイルを設定したり、起動画像を指定したりできます。
起動イメージを指定する
デフォルトでは、Safari で読み込み中や、複数回の実行後に空白の画面が表示されます。
は、アプリの以前の状態のスクリーンショットを読み込みます。これを防ぐには
明示的な起動イメージを表示するよう Safari に指示するには、リンクタグと
rel=apple-touch-startup-image。例:
<link rel="apple-touch-startup-image" href="icon.png">
画像は、対象デバイスの画面の特定のサイズ、または 使用されません。詳しくは、 Safari のウェブ コンテンツ ガイドライン をご覧ください。
このトピックに関する Apple のドキュメントは多くありませんが、デベロッパー コミュニティでは 高度なメディアクエリを使用して すべてのデバイスをターゲットに 適切なデバイスを選択してから正しい画像を指定します。こちらが tfausak's gist 提供の実用的な解決策
ステータスバーの外観を変更する
デフォルトのステータスバーの外観を black または
black-translucent。black-translucent では、ステータスバーが上にフロート表示される
コンテンツを押し下げることができますこれにより、レイアウトが
高さは大きくなりますが、上部を遮ります。必要なコードは次のとおりです。
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent を使用したスクリーンショット
black を使用したスクリーンショット