概要
忘れないうちにメモメモ。。。
現在、使っているのは iOS 15.5 です。
Web画面作っていて、端末の向きを縦横変更した際に何故か window.innerWidth と window.innerHeight が微妙にずれた値になる・・・という現象が発生していました。
Safariだけ現象が発生するんですよねーChromeさんは何の問題もないです。
私の知識不足だったのですが、いろいろ調べて最終的に以下の情報でうまくいきました。
私の場合は、viewportのmeta タグに上に記載されている shrink-to-fit=no を追加するとバッチリうまくいきました。
documet.documentElementに先にアクセスする方法は試していません。
上の情報には本当に感謝です。
参考情報のところに、いろいろ参考になったサイト様や記事を記載しておきます。
同じような現象になっている人（多分いないと思いますが）のご参考になれば。
参考情報
- javascript - window.innerHeight returning wrong value in iOS 11 - Stack Overflow
- css - iOS 13 Safari: Bug(s) in window.innerHeight - Stack Overflow
- Resize: innerWidth/innerHeight bug with iOS9 · Issue #25 · bigwheel-framework/bigwheel · GitHub
- ios safariでviewportがずれる - Qiita
- モバイルブラウザで画面の縦長・横長を検出する方法を再確認してみた - Qiita
- Javascript で高さ幅とか - Qiita
- javascript - Does Safari iOS9 returns a wrong value for window.innerHeight? - Stack Overflow
過去の記事については、以下のページからご参照下さい。
サンプルコードは、以下の場所で公開しています。
