html - ブラウザ ウィンドウのサイズに応じて Web サイトの背景を変更する方法

Question

ブラウザー ウィンドウが特定のサイズよりも小さい場合、背景の一部がテキストと衝突する Web サイトに取り組んでいます。ブラウザ ウィンドウが一定量より小さくなった後に背景を変更することはできますか?

Answer 1

window.onresize イベントにフックしてウィンドウの幅と高さを確認し、これらの値に基づいて背景色を希望する色に設定できます。

window.onresize = function(event) {
    var height = window.innerHeight;
    var width = window.innerWidth;
}

この解決策は、IE に対する他のブラウザとの互換性の問題がある可能性があるため、おそらくjQuery関数がより好まれます。

$( window ).resize(function() {
   var height = $(this).height();
   var width = $(this).width();
});

編集：（提供された例）

    <script type="text/javascript">
        window.onresize = function (event) {
            var height = window.innereight;
            var width = window.innerWidth;

            if (width < 500 || height < 500) {
                document.getElementById('Div1').style.backgroundColor = '#FF0000';
            }
        }

//OR WITH JQUERY

        $(window).resize(function () {
            var height = $(this).height();
            var width = $(this).width();

            if (width < 500 || height < 500) {
                $('#Div1').css('background-color', '#FF0000');
            }
        });
    </script>

    <div id="Div1" style="width: 300px; height: 300px;">
        test div
    </div>

Chrome でinnerHeightプロパティを使用すると、値が未定義として返されるため、これはサポートされていないようです。jQuery メソッドが推奨されるソリューションです。