iOS7がリリースされて、 Mobile Safari の見た目も操作性もだいぶ変わったたのですが、そのうちの一つ、
URLバーの挙動がどうもきになる動作をしているようだったので、メモエントリー。
今回気になったのが、URLバーの表示／非表示が切り替わるタイミングのイベント、横画面の時の高さ周りの取得をしようとしていた時に、サイズが変わってもどうも risize イベントが走っていない様子。
iOS7 の URL バー表示／非表示
初期読み込み時などは URL バーのみの表示となった iOS7 の Mobile Safari 。スッキリ表示になったなーくらいの印象でいました。
スクロールをすることで表示が小さくなります（高さが低くなる）。
小さくなるのはいいのです。
今回あれ？ってなったのは横画面。縦の時に一番上にスクロールがある状態で横にすると、最初はフルスクリーンでURLバーなどは隠れるのですが、タップで出現になります。画面の領域が変わるので、iOS7以前は resize イベント周りが動いていてくれたのですが、どうも今回は走らない！
resize イベントは走らない
検索してみたところ、該当の内容がはやり書いてあり、 resize イベントが走っていないとのこと。
問題は、ツールバーの表示／非表示が切り替わった際にresizeイベントが発生せず、メディアクエリなどでも検知できないことです。これにより、画面の高さが変わったことをアプリが検知できないということになり、なるべく固定の幅や高さを確保しようとするゲームなどでは、時に大きな問題になります。 また、ネイティブではないスクロール（iframeやoverflow:scroll、JavaScriptベースのスクロールなど）を使用しているアプリの場合は、ツールバーが表示されっぱなしになってしまう事があります。
引用元：iOS7におけるMobile Safariの主な変更点 | HTML5Experts.jp
この仕様は、高さ周りを気にしている場合はとても微妙な感じに。ちなみにヘッダーやフッターに position:fixed; でボタンなどを設置している場合、上記の回転後の表示のタイミングの時に、ボタンが反応しなくなるような時がありました。（発生条件は未検証ですが、とりあえず fixed との関連と想定で）
iOS まわりではそれほど苦労することはなかったのですが、この変更は自分以外にもあらら・・・となる人は出てくるのではないでしょうか（いないかもしれないですが）。
高さ関連で何かしようとするのはスマートフォンではやらないのが一番かもしれないです。
