我禁用某些jQuery脚本在特定的屏幕大小，但我如何得到它检查时，屏幕调整大小

I Disabled certain jQuery script at certain screen size but how do I get it check when screen is resized?

本文关键字：屏幕 何得 调整 检查 脚本 jQuery      更新时间：2023-09-26

我得到这个禁用屏幕尺寸低于1020，但任何想法如何让它动态检查，因为浏览器窗口正在调整大小?: 

<script>
$(document).ready(function() {
/*Set height of sections to window height*/
$( "#homepage-fold" ).each(function(){
if ($(window).width() >= 1020) {
    var $this = $(this);}
    $this.css({'height':($(window).height())+'px'});
    /*Recalculate on window resize*/
$(window).resize(function(){
        $this.css({'height':($(window).height())+'px'});
    });
 });
 });</script>

任何想法如何获得的if语句，我添加的工作动态作为浏览器的调整大小。我试着在第二个Recalculate部分包装第一个if标签，但我一定没有把它放在正确的位置。

谢谢! !

,

首先，这似乎是一个简单的解决方案，但我尝试的解决方案没有工作。我是jQuery的新手，所以我猜这是我的语法错误——可能是这个规则的位置不正确。如果有人能帮我弄清楚如何让这个工作，我将非常感激。我只希望这个脚本是活跃的屏幕尺寸大于1020px。1020以下的屏幕应该看到没有这个活动脚本的页面。

   <script>
   $(document).ready(function() {
    /*Set height of sections to window height*/
    $( "#homepage-fold" ).each(function(){
        var $this = $(this);
        $this.css({'height':($(window).height())+'px'});
        /*Recalculate on window resize*/
        $(window).resize(function(){
            $this.css({'height':($(window).height())+'px'});
        });
    });
});</script>

我想通过添加

    if(screen.width >= 1020){

这样的:$(文档)时函数(){

    /*Set height of sections to window height*/
    $( "#homepage-fold" ).each(function(){

如果屏幕。

        var $this = $(this);
        $this.css({'height':($(window).height())+'px'});
        /*Recalculate on window resize*/
        $(window).resize(function(){
            $this.css({'height':($(window).height())+'px'});
        });

补充道:});}); 

});</script>

有人知道我在哪里弄乱了这段代码吗?谢谢你! !

这就是我的方法。setFold函数将所需元素的高度设置为窗口的高度，如果窗口的宽度小于断点(1020)，则设置为默认值(999)。我还将onresize回调包装成一个超时，该超时延迟其执行，直到resize事件实际结束(从而使其真正成为onresizeend)。这有时是一个好主意，因为resize被触发多次，而有人调整窗口的大小。根据onresize所做的事情，这可能会导致相当的延迟，在大多数情况下，当用户停止调整大小时，它只发生一次是完全可以的(你可以在这里玩callbackDelay，或者只是完全删除超时的东西)。

$(document).ready(function(){
    // DOM READY
    var $window    = $(window), // cached
        $fold      = $('#homepage-fold'),
        breakpoint = 1020,
        defaultHeight = 999,
        resizeTimeout,
        callbackDelay = 200; // ms

    function setFold(){
        if( $window.width() < breakpoint ){
            $fold.css('height', defaultHeight );
        }
        else {
            $fold.css('height', $window.height() );
        }
    }
    setFold(); // initial setting
    // Attach event
    $window.on('resize', function(){
        clearTimeout( resizeTimeout );
        resizeTimeout = setTimeout(function(){
            setFold();
        }, callbackDelay );
    })
});

这样做:

if ($(window).width() >= 1020) {
}

另外，你可能还想把这个写入一个resize函数中这样，如果有人调整浏览器窗口的大小，脚本会根据调整后的尺寸触发或不触发，而不仅仅是初始尺寸

相关文章：