Question

网站构建中的一些元素会考虑客户端的大小。如果用户决定重新调整窗口大小，则某些元素看起来会混乱。因此，我试图构建一个不断检查任何尺寸是否发生变化的函数。

这是我到目前为止所做的事情

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

它确实有效，但是如果窗口的大小超过某个点，它就会保持不变清爽。

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

干杯。

Answer 1

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

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

随窗口大小的变化重新加载浏览器

1 个答案: