読者です 読者をやめる 読者になる 読者になる

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でロック画面を解除すると症状が悪化することがあるからやっぱり放っといた方がよさげ。。