iPhoneのSafariでページを読み込んだ直後からアドレス・メニューバーを非表示にさせる「minimal-ui」プロパティ

iPhoneのSafariでページを読み込んだ時には画面の上にアドレスバー、下にメニューバーが表示されます。下にスクロールすると非表示になりますが、Perpetual Betaで読み込んだ直後から非表示にする方法が紹介されていました。

sponsored link

viewportにプロパティを追加する

使用するのはminimal-uiというプロパティです。header.php内にname="viewport"があると思うのでminimal-uiと追加します。複数のプロパティはカンマ(,)で区切って記述します。

どういう挙動をするのかは動画をご覧下さい。(音声なし19秒の動画です)

ページを読み込んだ時点でアドレスバーとメニューバーはしまわれた状態になり、アドレスバーのある画面上部をタップすると両方表示されます。


いつもの操作ができないのはストレスになると思うので一般的なサイトでは使用するメリットは薄いですかね。
画像などをファーストビューからきれいに見せたいという意図があるなら試してみる価値はあるのかなと思います。