iOS7.1のSafariでアドレスバーを最小サイズで初期表示する

iOS7から、Safariのデザインが一心されました。
それとともにアドレスバーが小さくするのが困難になったわけですが、iOS7.1ではHTML記述によって
デフォルトの表示を最小サイズに指定できるようになっていたためご紹介します。

 

記述方法

HEAD内のviewport内に、minimal-uiを追加するのみです。

 

 

結果

上記のみで以下のようになります。

2014-08-19_16_13_27_png_と_2014-08-19_16_13_24_png_と_新規投稿を追加_‹_SRIA_BLOG_—_WordPress

 

アドレスバーが小さくなって表示領域が広くなってます。
また、下部のボタン類も表示されなくなります。

上記状態から、アドレスバーを広く、下部ボタンを表示したい場合は
通常同様に、アドレスバー部分をタップすれば表示されるようになります。

 

iOS7.0では、HTML、CSSハック的なもので対応しなければならなかったので
こういった形で設定できるのは非常に良いですね。

 

ちなみに、横向き(Landscape)だと不具合(?)もあったりするようです。

 

iOS7.1 Safariのminimal-uiと高さ100%コンテンツへの使用警告



❏❏ TOPIC ❏❏ ------------------------------------------------------------

カスタム自由!フリーECサイトパッケージ
チャットボット導入サービス
WEBシステム開発・スマホアプリ開発はSRIAへ