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

More than 1 year has passed since last update.

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

モバイルサイト向けには次のような 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を指定しない場合(この場合でも画面をスクロールすればアドレスバーが小さく&フッタが消えはする)

      写真 2014-08-06 16 21 50.png

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

      写真 2014-08-06 16 21 56.png

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

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

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

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

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

写真 2014-08-06 16 31 05.png 写真 2014-08-06 16 31 12.png

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

写真 2014-08-06 16 30 29.png 写真 2014-08-06 16 28 27.png

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

写真 2014-08-06 16 29 36.png

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

ほか

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