iPhoneサファリで、WEBサイトをアプリっぽく見せる

方法① アドレスバーを小さく＆フッタメニューを消す

モバイルサイト向けには次のような viewport を指定していることが多いかと思いますが、

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

次のように minimal-ui を追加します。

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

• イメージ：

  • minimal-uiを指定しない場合(この場合でも画面をスクロールすればアドレスバーが小さく＆フッタが消えはする)

    

  • minimal-uiを指定した場合(常にアドレスバーが小さく＆フッタが消える)

    

実際のページはこちら(iPhoneで開いてみてください)

• minimal-uiを指定しない場合：http://hkusu.github.io/iOS_viewport_demo/index1.html
• minimal-uiを指定した場合：http://hkusu.github.io/iOS_viewport_demo/index2.html

方法② 端末のホーム画面から起動した場合にフルスクリーンモードにする

次のような meta タグを追加します。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

このページを次のように端末のホーム画面に追加し、

　

ホーム画面から起動すると、フルスクリーンモードで表示されます。

　

また、フルスクリーンモードの場合、Safariとは表示上？ 別タスクとなるようで、独立したアプケーションとしてタスク表示されます。

実際のページはこちら(ホーム画面へ追加してから起動してみてください)

• http://hkusu.github.io/iOS_viewport_demo/index3.html

ほか

• 実際には ②のときも①のタグを書いておけばいいと思います。
• minimal-ui が使えるのは、iOS7.1？ 以降だったかと。
• フルスクリーンモードの場合、別ドメインのWEBページにリンクすると、Safariが立ち上がってしまうようです。
  • ただ、JavaSriptでハンドリングすれば回避できるらしい。