iPad(iOS7)のSafariでなんか画面下に余白ができるんです
iPad mini(iOS 7.1.1)のSafariがlandscapeだとなんでか画面下部に余白ができるんです。たぶん20px。
window.innerHeight
が672。これはいい。
でも$("body")[0].offsetHeight
が690。これはない。さらにdocument.documentElement.clientHeight
が691、そしてwindow.outerHeight
が692。
portraitだとここまで変ではないのできっと事件だと思ってそこに焦点絞って調べたところ、
iPad(iOS7.0.4)のランドスケープモードで height: 100% だとバグる | girigiribauer.com
こちらで紹介されている検証サイトを使うとたしかにBUGGYってなる。
対策は
css - iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue - Stack Overflow
この記事を参考にして
@media all and (orientation: landscape) { html.ipad.ios7 > body { position: fixed; height: 672px !important; width: 100%; } }
こうして
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) { $('html').addClass('ipad ios7'); }
こうすると余白が出ないようになった。
buttom: 0
があると何も表示されなくなるから削除した。
2014-05-27追記 landscapeでロック画面を解除すると症状が悪化することがあるからやっぱり放っといた方がよさげ。。