レシポンシブ対応した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">

参照: Configuring the Viewport

ホームアイコンを設定する

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の画像が使われる

  1. apple-touch-icon-{size}.png
  2. 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