iOS Safari でソフトウェアキーボードが出た時にブラウザの有効な天地サイズを取得し、レイアウトを整える

css iOS
2023-07-16 20:02 (10ヶ月前) ytyng

固定フッターがある場合のページレイアウトにしていると、iOS でソフトウェアキーボードが表示された時にレイアウトが破綻する場合がある。

レイアウトの最大天地の高さを CSS 変数にして、iOS の場合 は更新し続けるようなコードにして解決した。

:root {
  --visual-viewport-height: 100%;
}

body {
    height: var(--visual-viewport-height);
}
const w = window as any;
const refreshSize = () => {
  w.document.documentElement.style.setProperty('--visual-viewport-height', `${w.visualViewport.height}px`)
  w.scrollTo(0, 0)
}
w.mobileUIRefreshInterval = setInterval(refreshSize, 300)
refreshSize()

// 条件を解除したい場合
...
clearInterval(w.mobileUIRefreshInterval)

補足事項

iOS Safari で、100vh を正しく計算するための -webkit-fill-available というオプションがある

今回の用途には使えなかったが、別の用途でうまく使える場合もありそうなので書いておく。

body {
    height: 100vh;
}
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    height: -webkit-fill-available;
  }
}

参考: iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる

ソフトウェアキーボードが表示されている時は、強制的にスクロールが有効になる

bodyoverflow: fixed をつけていても、iOS でソフトウェアキーボードが表示されると強制的にスクロールができるようになる。

この場合、固定フッターがあるレイアウトの Web アプリの場合、使用感が良くない。

いくつか対策はあるけど、SetInterval で `window.scrollTo(0, 0)`` を定期的に実行してしまうのが良いと思った。 実際に window のスクロールがされた時はちょっとちらついてしまう問題はあるけど、実用的には十分で安定している。

Currently unrated

Comments

Archive

2024
2023
2022
2021
2020
2019
2018
2017
2016
2015
2014
2013
2012
2011