iPhone webAppのためのHTML

apple-touch-icon の設定

ホーム画面追加時のアイコンですね。一部 Android も対応しています。 最低でもひとつ作ればいいのですが、iPhone や iPad でサイズが違うので、細かく作りたい人は分けることも可能です。

html
光沢あり
<link rel="apple-touch-icon" href="apple-touch-icon.png">
光沢なし (precomposed)
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">
html
解像度別
<!-- iPhone Non-Retina -->
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<!-- iPhone Retina -->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
  
<!-- iPad Non-Retina -->
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<!-- iPad Retina -->
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">

Web アプリモード (Safari) 用の meta タグ設定

Safari でホーム画面に追加したときのアイコンをタップ時、meta タグに指定があれば Web アプリモードで起動できます。 ステータスバーを非表示にするなどできますが、外部のリンクは別窓で開いてしまうので注意が必要です。

起動時フルスクリーン表示

html
<meta name="apple-mobile-web-app-capable" content="yes">

ステータスバーの色を3色から1つ指定

html
<!-- デフォルト -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- 黒 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 半透明黒 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

アプリ名を指定する

html
<meta name="apple-mobile-web-app-title" content="My App Name">

Web アプリモード (Safari) 用の スプラッシュスクリーン設定

Web アプリ起動時のスプラッシュスクリーンも画像があれば読み込むことが可能です。 ただし解像度別に作らなくてはならないので Media Queries を使って解像度別に画像を用意します。 画像のサイズもぴったしじゃないと起動画面が真っ白になるのでご注意を。

iPhone 4 は 640×920, iPhone 5 は 640×1096, iPad (縦) は 768×1006 (1536×2008/Retina), iPad (横) は 1024×748 (2048×1496/Retina) です。 全部対応させようと思うと結構な数になりますね…。

html
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
<!-- iPhone 3 and 4 Non-Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="apple-touch-startup-image-320x460.png">
<!-- iPhone 4 Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x920.png">
<!-- iPhone 5 Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
  
<!-- iPad Non-Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-768x1004.png">
<!-- iPad Non-Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-1024x748.png">
<!-- iPad Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-devisce-pixel-ratio: 2)" href="apple-touch-startup-image-1536x2008.png">
<!-- iPad Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-2048x1496.png">

Web アプリモードかを判定する

以下の JavaScript で判定できます。 PC や Android の判定も記述すればそれぞれ表示を変えることも可能です。

javascript
if (window.navigator.standalone) {
    // Web アプリ
} else {
    // 通常 Safari
}
Home | Permalink