浏览器大小的Window.width(）

Window.width() for browser size?

本文关键字：width Window 浏览器      更新时间：2023-09-26

我有以下JQuery函数：

<script>
    $(document).ready(function(){
        var current_width = $(window).width();
        if(current_width => 1920){
            $("#body").css({    
                -moz-transform: 'scale(1, 1)', 
                zoom: '1',  
                zoom: '100%' 
            });
        }
        else if(1366 < current_width < 1920){
            $("#body").css({    
                -moz-transform: 'scale(0.85, 0.85)',
                zoom: '0.85', 
                zoom: '85%', 
            });
        }
       else if(current_width <= 1366){
            $("#body").css({    
                -moz-transform: 'scale(0.7, 0.7)',
                zoom: '0.7', 
                zoom: '70%' 
            });
       }
    });
</script>

我使用Chrome窗口调整大小扩展来测试不同的屏幕大小，但当使用window.width JQuery函数时，尽管浏览器正在调整大小，但它仍然检测到我的原生1920px宽度。我的代码有问题吗？或者在使用window.width()功能时，我确实需要使用其他设备测试不同的屏幕大小？

感谢

在resize事件处理程序中包装代码。请参阅下面代码中突出显示的更改。

$(window).on('load resize rotate', function() {
    // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    var current_width = $(window).width();
    if (current_width >= 1920) {
        //            ^^
        $("#body").css({
            '-moz-transform': 'scale(1, 1)',
            // zoom: '1', Don't need
            zoom: '100%'
        });
    } else if (current_width > 1366 && current_width < 1920) {
        //     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        $("#body").css({
            '-moz-transform': 'scale(0.85, 0.85)',
            // zoom: '0.85', // Not needed
            zoom: '85%',
        });
    } else if (current_width <= 1366) {
        $("#body").css({
            '-moz-transform': 'scale(0.7, 0.7)',
            // zoom: '0.7', // Not needed
            zoom: '70%'
        });
    }
});
相关文章：