Question

如何使用每次用户更改窗口大小时，页面执行功能？

Answer 1

以下功能应该可以满足您的需要，它可以在所有浏览器上运行（只有在Safari没有最大化且分辨率发生变化时不会触发）

它会在窗口重新调整大小以及更改分辨率时触发，并且在用户重新调整窗口大小时也会延迟避免多次调用。

    var resizeTimer;

    //Event to handle resizing
    $(window).resize(function () 
    {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(Resized, 100);
    });

    //Actual Resizing Event
    function Resized() 
    {
        //Your function goes here
    };

<强> Testing jsFiddle

Answer 2

关于这篇文章：https://developer.mozilla.org/en-US/docs/DOM/window.onresize

window.onresize = resize;

function resize()
{
    alert('window size changed');
}

window.resize让它变得非常简单。

Answer 3

我的主张。第一个HTML＆amp; CSS。

<强> HTML

<div id="wrapper">
    <div id="div1">
        #div1 content
    </div>
    <div id="div2">
        #div2 content
    </div>
</div>

<强> CSS

div {
    color: white;
    margin: 20px;
    padding: 5px 18px;
    font: 700 16px/200% sans-serif;
}
#div1 {
    background-color: #d00;
}
#div2 {
    background-color: #27d;
}

现在 jQuery ：

仅限文档就绪（https://jsfiddle.net/sz7aeo9j/）

<script>
    $(document).ready(function () {
        var divone = $('#div1')[0].outerHTML
        var divtwo = $('#div2')[0].outerHTML
        $('#div2,#div1').remove();
        if ($(window).width() < 640) {
            $('#div1').remove();
            $('#wrapper').html(divtwo);
        }
        if ($(window).width() > 640) {
            $('#div2').remove();
            $('#wrapper').html(divone);
        }
    });
</script>

在窗口大小调整（https://jsfiddle.net/sz7aeo9j/1/）

上

<script>
    $(document).ready(function () {
        var divone = $('#div1')[0].outerHTML
        var divtwo = $('#div2')[0].outerHTML
        $('#div1').remove();
        $(window).resize(function () {
            if ($(window).width() < 640) {
                $('#div1').remove();
                $('#wrapper').html(divtwo);
            }
            if ($(window).width() > 640) {
                $('#div2').remove();
                $('#wrapper').html(divone);
            }
        });
    });
</script>

Answer 4

你可以在窗口上注册一个onresize事件：当窗口大小改变时调用一个函数

https://developer.mozilla.org/en/DOM/window.onresize

Answer 5

使用screen.width和screen.height确定屏幕的宽度和高度。

检测窗口调整大小并使用jquery执行功能

5 个答案: