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を追加しておくことで
読み込みの完了と同時にフルスクリーンになります。
この状態ではスクロールしても、アドレスバーは細い状態で固定となり、
ボタンバーは表示すらされません。
細い状態のアドレスバーをタップすることでボタンバーなどが表示されます。
通常
minimal-ui付与
広くなっているのが分かりますね!
まとめ
はじめから表示領域を多く取りたいときは、
iOS6.xまでは、JavaScriptでアドレスバーを消す、
iOS7.0では、諦めてユーザーがスクロールするまで待つ、
iOS7.1からは、viewportにminimal-uiを追加しておくということになります。
ちなみにこのminimal-uiですが、
widthやscaleとは違い、JavaScriptからviewportを追加しても動作しないようです。
JavaScriptから操作出来ると思ったのですが、残念です。