iPadの横表示（ランドスケープ）で、cssのvhを使うと数値が変。

css3には「vh」という単位があります。
ウインドウの縦幅を100vhとして計算されるため、数値で固定してしまうpxでの指定よりレスポンシブデザインと相性が良いですね。
さらに縦幅は%が使いづらい（親のボックスに依存したり、縦方向のpaddingを%で指定しても横幅基準だったり）ため、とても有用です。


しかし。

iPadでvhを取得したときの話。
内容全体を100vhとしているのになぜか縦方向にスクロールが発生してしまうという現象が起こりました。
これは「ウインドウの縦幅を100vhとする」という定義からしてあり得ません。

どうやらiOSのsafariでは、vhはアドレスバー部分も含めたサイズとして計算されてしまうようです。（ホントか？）

まぁ、平たく言ってバグ、と思えるのですが、実際そうなってしまっている以上、泣きをみるのはサイト制作者であり（笑）、何らか対処せざるを得ません。
かといって、端末判定などはしたくない。
今後のことなど汎用性を考えるとなるべくトリッキーなことはしたくないのです。

そこで今回やった対処はこんな感じ。

１．基本的には100vhで設定しておく
　→PCや正しくvhが取れるブラウザはこれでOK。
２．jQueryで、$(window).height()と、100vhを指定してある要素のheight()を比較し、$(window).height()の方が小さい場合は100vhを指定してある要素の高さを設定し直す。
３．一瞬ちらっと見えてしまうのは嫌だったので、内容全体はいったん外に飛ばすか、loadingを被せるなどして隠し、処理が終わったら見えるようにする。

これで、今後iOSでvhが正しくとれるようになったらそれはそれで大丈夫。
問題は３点。

１．100vhが設定してある要素が多い場合は再設定が面倒。また、今後増えたときにも設定を忘れないようにする必要がある。
２．100vh以外にもvhを各所に使ったレイアウトの場合はずれが許容できるかどうか要チェック。
３．一瞬ちらっと見えてしまうのを嫌っての対処が追加になってしまう。


まぁ、スマホ・タブレットは、スクロールしたときにアドレスバーが縮む影響でvhの値も変わるし、ウインドウのリサイズイベントが発生するし、制作者的にはいろいろネックになるPCに無い仕様があって面倒ですね。
バージョンアップで少しずつ仕様も変わるし。