iOS7.1のMobile Safariでアドレスバーを隠す方法

こんにちは、河森です。
今日はリリースされたばかりのiOS7.1に搭載されているMobile Safariについて書こうと思います。

以前のアドレスバー隠し

iOS6.xまではページの読み込みが完了した後に、
JavaScriptにて縦にスクロールさせることでアドレスバーを隠すというやり方がありました。

iOS7.0ではどうなったのか

以前まで使えていたやり方は通用しなくなり、
ユーザーがページをスクロールしない限りは、
フルスクリーンにすることは出来なくなってしました。
これにより、iScrollやSencha Touchなどのライブラリやフレームワークを利用したり、CSS-webkit-overflow-scrolling: touch;などでページのスクロールを制御している場合は、表示領域が狭いままという問題がありました。

iOS7.0では開発者主導でアドレバスバーが消せなくなったのです。

iOS7.1では...

先日にリリースされたiOS7.1では、
<meta name="viewport" content="minimal-ui">
このようにviewportにminimal-uiを追加しておくことで
読み込みの完了と同時にフルスクリーンになります。
この状態ではスクロールしても、アドレスバーは細い状態で固定となり、 ボタンバーは表示すらされません。
細い状態のアドレスバーをタップすることでボタンバーなどが表示されます。

通常

f:id:techinterfirm:20140317190704p:plain

minimal-ui付与

f:id:techinterfirm:20140317190703p:plain

広くなっているのが分かりますね!

まとめ

はじめから表示領域を多く取りたいときは、
iOS6.xまでは、JavaScriptでアドレスバーを消す、
iOS7.0では、諦めてユーザーがスクロールするまで待つ、
iOS7.1からは、viewportにminimal-uiを追加しておくということになります。

ちなみにこのminimal-uiですが、
widthやscaleとは違い、JavaScriptからviewportを追加しても動作しないようです。
JavaScriptから操作出来ると思ったのですが、残念です。