サイトを最適化する
電話番号にリンクを設定する
- スマートフォン端末では、電話番号にリンクを設定することでブラウザから直接電話をかけることができます
《電話番号にリンクを設定》
<a href-"tel: 03-0000-xxxx">03-0000-xxxx</a>
ホームアイコンを設定する
- iPhoneやAndroidでは、ホーム画面にウェブサイトを登録できます
- 初期設定ではサイトのキャプチャがアイコンとして使用されます
- 任意の画像をホームアイコンとして使用するには、head要素内で link要素の href属性に対象のアイコン画像を指定します
- サイトにBasic認証が設定されているとアイコンは表示されません
《ホームアイコンの設定》
<link rel="apple-touch-icon-precomposed" href="画像ファイルのパス">
- rel属性に「rel="apple-touch-icon」を指定すると、自動的にアイコンに光沢が追加されます
- ただしAndroid 2.1では、アイコンが読み込まれなくなります
- そのため Android 2.1を対象にする場合には、「apple-touch-icon-precomposed」と記述する必要があります
- すべての条件で光沢のあるアイコンを使用したい場合には、あらかじめ光沢のある画像を用意しておく必要があります
アイコンのサイズ
《サイズごとにアイコンを設定》
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" href="touch-icon-ipad.png" sizes="72x72"> <link rel="apple-touch-icon" href="touch-icon-iphone4.png" sizes="144x144">
スタートアップイメージの指定
- iOSのみ
- ホームから起動する際に、ネイティブアプリケーションのようなスタートアップイメージが表示されます
- 画像は、640 x 920pxで作成します（320 x 460px でも読み込み可能です）
《iOSでホームに登録したページに起動画面を設定する》
<link rel="apple-touch-startup-image" href="画像ファイルのパス">
スタンドアローンモードで表示する
- iOSのみ
- スタンドアローンモード（全画面表示）を設定すると、サイトをホーム画面から起動した際にSafariのナビゲーションが非表示になり、フルスクリーンで表示されます
- Webサイトが待機状態の時には待機アプリと同じようにリストに表示されます
<meta name="apple-mobile-web-capable" content="yes">
| content属性の値 | 説明 |
|---|---|
| content="yes" | ホーム画面からはスタンドアローンモードで起動する |
| content="no" | ホーム画面からはスタンドアローンモードで起動しない |
- ただし、スタンドアローンモード時にページ内のa要素をタップすると、新たにSafariが起動してページが表示されます
- ページ遷移もスタンドアローンモードで行いたい場合は、その処理をJavaScriptなどで別途記述する必要があります
ランドスケープ表示時のテキストサイズ調整
《ランドスケープ表示時のテキストサイズ調整の無効化》
body { -webkit-text-size-adjust: none; }
《-webkit-text-size-adjustの指定値》
| 指定値 | 説明 |
|---|---|
パーセント |
パーセントで指定する |
| auto | ブラウザ上で自動的に調整される |
| none | 自動調整を行わない |
