如何更改与浏览器窗口大小有关的网站背景

Question

I'm working on a website where if the browser window is smaller than a certain size, part of the background clashes with the text. Is it possible to change the background after a browser window becomes smaller than a certain amount?

Answer 1

You can hook into the window.onresize event to check the width and height of the window, then based on these values you can set the background color to what you desire.

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

This solution may have compatability issues in other browsers to IE and so the jQuery function is probably more prefered:

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

EDIT: (Example provided)

    <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>

Please not that when using the innerHeight property in Chrome that the value is returned as undefined and so this does not seem to be supported. The jQuery method would be the preferred solution.