🚀
iOS Safariでデバイス回転後にページ下部の空白ができてしまう問題
html、body要素をheight100%に指定してアドレスバーにも対応させる
■ 課題
html、body要素にheight100%を指定して高さの調整を行った場合、デバイス回転後に白いエリアが出きてしまいます。
■ 対策
- 横回転を検知後に「window.scrollTo」 でスクロール処理を500ms後に実行してあげる
const setFillHeight = () => {
setTimeout(() => {
window.scrollTo(0, 1);
}, 500);
}
// アドレスバー開閉 or 横回転後にスクロール処理を実行
window.addEventListener('resize', setFillHeight);
■ Reference
Discussion