Javascript 窗口大小更改时重新加载浏览器

站点im构建中的一些元素考虑了客户端的大小。 如果用户决定重新调整窗口大小，某些元素将看起来一团糟。 因此，我试图建立一个功能，不断检查，如果任何维度的变化

这就是我到目前为止所做的

<script>
    var initial_width = document.body.offsetWidth,
        initial_height = document.body.offsetHeight,
        timer = window.setInterval(function () {checksize()}, 10);

        function checksize () {
            var current_width = document.body.offsetWidth,
                current_height = document.body.offsetHeight;
                if((initial_width != current_width) || (initial_height != current_height)){
                    location.reload();
                } 
                else{
                    document.getElementById("test").innerHTML = "no change";
                }
        }   
</script>

var initial_width=document.body.offsetWidth，
初始高度=document.body.offsetHeight，
timer=window.setInterval（函数（）{checksize（）}，10）；
函数checksize（）{
var current_width=document.body.offsetWidth，
当前高度=document.body.offsetHeight；
if（（初始_宽度！=当前_宽度）||（初始_高度！=当前_高度））{
location.reload（）；
} 
否则{
document.getElementById（“test”）.innerHTML=“无更改”；
}
}   

有时它确实可以工作，但如果窗口的大小被重新调整到某个点以上，它就会保持不变 令人耳目一新

关于如何修复/改进此代码有何建议？ 或者我应该采取不同的方法

---

干杯。

在此包装您希望重新绑定的任何代码：

//declare global variable
var windowWidth = "";   

$(window).resize(function() {
    windowWidth = $(window).width();

    if (windowWidth < 768) {
        //change element size
    } else if (windowWidth >= 768 || windowWidth < 1000) {
        //change element size again
    } else {
        //change element size again
    }
});

//声明全局变量
var windowWidth=“”；
$（窗口）。调整大小（函数（）{
windowWidth=$（window.width（）；
如果（窗宽<768）{
//更改元素大小
}否则如果（窗宽>=768 | |窗宽<1000）{
//再次更改元素大小
}否则{
//再次更改元素大小
}
});

您应该采取不同的方法。考虑使用无关系的布局（库、框架等），但是<代码>函数（）{Cusisiz（）} /代码>似乎是一种绕过“代码> CuthSigabs/CODE >的真正迂回的方式。你试过了吗？您能够使用jQuery吗？如果是这样，您可以使用

$（window）.on（'resize'，function（）{…}）

。干杯你认为我应该将重载函数替换为只需重新调整元素大小的函数吗？我的意思是服务器方面，它会帮助带宽吗？问题不是带宽，而是用户体验，所以是的，我会调整元素的大小，而不是重新加载页面。我将更改我的答案，以展示一个如何工作的示例…答案将更新，以包括如何标记不同的屏幕宽度以更改内容大小。显然，将if语句中的width值更改为您需要的值。如果你真的想，你可以对窗户的高度做同样的事情。