随着窗口大小的更改,重新加载浏览器

Reloading the browser as window size changes

本文关键字:新加载 加载 浏览器 窗口大小      更新时间:2023-09-26

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

它有时确实有效,但如果窗口的大小超过某个点,它就会保持令人耳目一新的

关于如何修复/改进此代码,有什么建议吗?还是我应该采取不同的方法?

干杯。

将您希望重新绑定的任何代码包装在中

//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
    }
});