iPhone のホーム画面に Web サイトを追加_html/css_WEB-ITnose

以前、Web サイトを Windows のスタート メニューに固定し、アイコン、色、Windows プッシュ通知をカスタマイズする方法についての記事を書きました。 Web ページ、Safari では、Web サイトを iPhone のホーム画面に簡単に追加して、通常のアプリのように見せることができます。

この機能の実装は非常に簡単で、ファビコンを追加するのと同じように、Webサイトのルートディレクトリに「apple-touch-icon.png」という名前の画像を配置するだけです（ 「favicon.ico」は Web サイトのルート ディレクトリに配置され、ブラウザは自動的に Web サイトのアイコンを読み込んで表示します)。

正確な制御が必要な場合は、次のコードを追加します:

1. Web ページの head セクションに次のコードを追加します。ここで、href 属性値は画像のパスです。

<link rel="apple-touch-icon" href="/custom_icon.png"/>

2. 異なる解像度のデバイスの表示効果に合わせて、3 つの異なる解像度の写真を追加できます: iPhone と iPod Touch の最初の 3 世代では 57 x 57 ピクセル、iPad では 72 x 72 ピクセル、114 x 114 ピクセルは、iPhone 4 や Retina ディスプレイを備えた iPod Touch などの後続の製品で使用されます。 size 属性によって制御されます:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

3. さらに、rel 属性の値を「apple-touch-icon-precomposed」に変更することで、iOS がアイコンにハイライト効果を追加することを回避します。