いろいろ備忘録日記

主に .NET とか Go とか Flutter とか Python絡みのメモを公開しています。

iOS Safari で window.innerWidthとinnerHeight が微妙にずれる (縦横の向きを切り替えたとき)

概要

忘れないうちにメモメモ。。。

現在、使っているのは iOS 15.5 です。

Web画面作っていて、端末の向きを縦横変更した際に何故か window.innerWidth と window.innerHeight が微妙にずれた値になる・・・という現象が発生していました。

Safariだけ現象が発生するんですよねーChromeさんは何の問題もないです。

私の知識不足だったのですが、いろいろ調べて最終的に以下の情報でうまくいきました。

gist.github.com

私の場合は、viewportのmeta タグに上に記載されている shrink-to-fit=no を追加するとバッチリうまくいきました。

documet.documentElementに先にアクセスする方法は試していません。

上の情報には本当に感謝です。

参考情報のところに、いろいろ参考になったサイト様や記事を記載しておきます。

同じような現象になっている人(多分いないと思いますが)のご参考になれば。

参考情報


過去の記事については、以下のページからご参照下さい。

サンプルコードは、以下の場所で公開しています。