スマホでwindow.loadでwindow.innerWidthを呼び出すと数値がおかしい

2019年3月19日 2019年6月3日 WEB ,

レスポンシブサイトを作る際、現在の画面幅(Viewportサイズ)で条件分岐させる事が少なくないと思いますが、window.loadからwindow.innerWidthを呼び出すと、スマホだけ数値がおかしい事が判明。

しかもload functoinの時のみ起きる現象のようです。
これはバグなのか…?

追記:2019/5/29
2019年5月29日現在、iOS側で修正されたのかwindow.innerWidthで問題なく正しいブラウザ幅の数値を取得できるようになっていました。
とりあえず、window.innerWidthは安心して使って良さそうです。

innerWidthの検証デモページ

innerWidthと他の数値を比べてみる

Chromeのデベロッパーツールのモバイル機能を使います。
ChromeでCtrl + Shift + Mで起動するヤツです。
適当にiPhone端末を選択します。

次のコードで検証します。

$(window).on('load',function(){
    console.log('screen.width: '+window.screen.width);
    console.log('innerWidth: '+window.innerWidth); // ← 問題のやつ
    console.log('$window: '+$(window).width());
});

Windowロード後にViewportサイズを取得します。
上から2番目のwindow.innerWidthの数値に注目。

innerWidthだけ明らかにおかしい…

さきほどの検証JSの1行目にresize functionも加えてみます。

$(window).on('resize load',function(){

ロード直後はやっぱりinnerWidthだけ数値がおかしいが、画面サイズを変更すると、他と同じ数値を取得できます。
マジで何なん…

結論

load functionからViewportサイズを取得するときは、window.innerWidthはとりあえず避けたほうが無難かも知れません。

参考リンク
https://qiita.com/ttttttttttahiti/items/b4a7bf3c0ea7dfe28712

お気軽にコメントをどうぞ。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ウェルスナビで損失?