ios7 safariのURLバー、ステータスバー問題

ios7になって、safariのURLバーとステータスバーが伸びたり縮んだりする仕様になっています。

狭いスマホの画面をフルに活用するために実装した機能と思われます。これはこれでとても便利です。

ただしこのバー。伸びたり縮んだりしてもresizeイベントが発生しないのです。

例えばブラウザゲームのサイトとか、画面サイズを固定してるサイトでは死活問題となります。

画面下に操作ボタンとか設置してると、ステータスバーのせいで見えなくなったり、といった影響が考えられます。

ちなみにbody全体にoverfow:hiddenを設定してやると、URLバーとステータスバーは強制的に表示されるので、それで回避できるようです。画面は狭くなっちゃいますが。

そもそもoverfow:hiddenが使えない場合はお手上げです。

そんなわけで別のやり方を考える必要がありそうです。
上はロゴ、下はバナーとか、見えなくても差し支えないようなコンテンツを置いておくとか。

今後スマホサイトを作る上で注意すべき点だと思います。