iOS Safariでデバイス回転後にページ下部の空白ができてしまう問題

1 min read読了の目安(約500字

html、body要素をheight100%に指定してアドレスバーにも対応させる

■ 課題

html、body要素にheight100%を指定して高さの調整を行った場合、デバイス回転後に白いエリアが出きてしまいます。

■ 対策

  • 横回転を検知後に「window.scrollTo」 でスクロール処理を500ms後に実行してあげる
const setFillHeight = () => {
  setTimeout(() => {
    window.scrollTo(0, 1);
  }, 500);
}

// アドレスバー開閉 or 横回転後にスクロール処理を実行
window.addEventListener('resize', setFillHeight);

■ Reference

https://developer.apple.com/forums/thread/128949