レシポンシブ対応したWebサイトをさらにアプリっぽくiOS Safariに最適化させるためのTips集
以下の記事とAppleのドキュメントのまとめです
5 Tips for Turning Your Website Into an iOS Web… – Chief Creative Mechanic
Optimizing Mobile Web Apps for iOS | Treehouse Blog
Developing Web Content for Safari
幅を端末に合わせる
Viewport metaタグを以下のように指定
<meta name="viewport" content="width=device-width, initial-scale=1">
さらに、ユーザーにリサイズさせないようにするには、Viewportにuser-scalable=noを追加する
<meta name="viewport" content="width=device-width, user-scalable=no">
ホームアイコンを設定する
linkタグで指定する
<link rel="apple-touch-icon" href="/path/to/icon.png">
sizes属性で、各端末に対応したサイズのアイコンを指定できる
60×60または なし: iPhone、iPod Touch (Non-Retina)76×76: iPad 2、iPad mini (Non-Retina)120×120: iPhone、iPod Touch (Retina)- 152×152: iPad、iPad mini (Retina)
linkタグがない場合は、規定のファイル名apple-touch-icon-***.pngの画像が使われる
- apple-touch-icon-{size}.png
- apple-touch-icon.png
参照: Configuring Web Applications
Safariのツールバーを隠す
ホーム画面に追加したアイコンから起動した際(Safariをスタンドアロンモード)にSafariのツールバーを隠すには以下のmetaタグを追加
<meta name="apple-mobile-web-app-capable" content="yes">
apple-touch-fullscreenの説明もよく見るが、apple-mobile-web-app-capableのみを指定すれば良いらしい
Difference between apple-mobile-web-app-capable and apple-touch-fullscreen | iPhone / iOS meta tags