iOS Safari：スクロールしただけでリサイズイベントが発生
よく忘れてしまうのでメモ。
iOS 8からスクロール時にアドレスバーが自動で小さくなる際に、リサイズイベントが発生します。
画面の横幅が変わった時のみリサイズ処理を行うようにしないと不具合がおきます。
// ウインドウの横幅を保持
var currentWidth = window.innerWidth;
window.addEventListener("resize", function() {
if (currentWidth == window.innerWidth) {
// ウインドウ横幅が変わっていないため処理をキャンセル。
return;
}
// ウインドウ横幅が変わったのでリサイズと見なす。
// 横幅を更新
currentWidth = window.innerWidth;
alert("リサイズ。");
});参考サイト
https://qiita.com/tonkotsuboy_com/items/d32ec6e7a1f6f592d415
【追記】
また、アドレスバーが表示されてしまうことで、高さいっぱいに表示したいのに上手くいかない場合があるので下記対応をすれば大丈夫っぽいです。
body {
min-height: 100vh;
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}参考サイト
https://coliss.com/articles/build-websites/operation/css/css-fix-for-100vh-in-ios.html
