Javascript 检测窗口大小并使用jquery执行函数

我如何使它在用户每次更改窗口大小时，页面都能执行一项功能？

以下功能应该可以满足您的需要，它可以在所有浏览器上运行（只有一个例外，当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
    };

---

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

---

使用

screen.width

和

screen.height

确定屏幕的宽度和高度。

关于本文：

---

window.resize使它非常简单。

我的建议。首先是HTML和CSS

HTML

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

现在，jQuery：

仅在文档准备就绪时（）

$（文档）.ready（函数（）{
var divone=$（'#div1'）[0]。outerHTML
var divtwo=$（'#div2'）[0]。outerHTML
$（'#div2，#div1'）。删除（）；
如果（$（窗口）.width（）<640）{
$（'#div1'）。删除（）；
$（'#wrapper'）.html（divtwo）；
}
如果（$（窗口）.width（）>640）{
$（'#div2'）。删除（）；
$（'#wrapper'）.html（divone）；
}
});

关于窗口大小调整（）

$（文档）.ready（函数（）{
var divone=$（'#div1'）[0]。outerHTML
var divtwo=$（'#div2'）[0]。outerHTML
$（'#div1'）。删除（）；
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<640）{
$（'#div1'）。删除（）；
$（'#wrapper'）.html（divtwo）；
}
如果（$（窗口）.width（）>640）{
$（'#div2'）。删除（）；
$（'#wrapper'）.html（divone）；
}
});
});

这需要jquery，不是吗？我很确定，如果分辨率发生变化时窗口最大化，事件会触发，但如果窗口没有最大化，并且实际上没有改变大小，事件会触发吗？@Rick-这可能值得一试testing@Rick-我测试了它，它会在分辨率改变时启动，“最大化”和“非最大化”。@Rionmonster-在Windows 7上用Safari 5.1测试了你的小提琴，最大化时它工作，但如果Safari没有最大化，它就不工作。这是我对所有浏览器的期望。不管怎样，谢谢你午餐后的有趣消遣。：-）那么，你的问题是什么？这是一个回答。对于这篇文章啊，我第一次复习，我忘了这是一个答案，不是一个问题。忽略我之前的评论。

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

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

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

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