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

レスポンシブサイトを作る際、現在の画面幅（Viewportサイズ）で条件分岐させる事が少なくないと思いますが、スマホ等のモバイル端末でwindow.loadイベント発火時にwindow.innerWidthを取得すると、意図した数値と異なってしまう現象に遭遇しました。

原因

結論から言うと、ブラウザのスクロールバーの出現タイミングや、レンダリングの完了状態がloadイベントの直後と重なり、正確な幅が算出できていないケースがほとんどです。

解決策: setTimeoutで遅延させる

直接呼び出すのではなく、微細な遅延を入れることで解決できます。

window.addEventListener('load', function() {
    setTimeout(function() {
        var width = window.innerWidth;
        console.log(width);
    }, 100);
});
            

このように処理を少し送らせることで、ブラウザ側の計算が完了し、正しい数値を拾うことが可能です。

注意点

画面幅の取得はresizeイベントでも頻繁に行うため、関数の共通化を行い、呼び出し元に注意を払うことが重要です。