Modernizr的媒體查詢觸發不一致

Question

我試圖讓我的腳本觸發只有當屏幕尺寸爲特定大小（800像素），而不僅僅是負載，但在屏幕尺寸重以上。

我已經把它Modernizr的MQ腳本里面，但它引發不一致。有時它會觸發我的腳本在一個小屏幕大小..有時在大......有時根本沒有。這導致我相信我已經完全搞砸了！

任何人都可以指向正確的方向嗎？

$(function() { 
    $(window).resize(function(){ 
    if (Modernizr.mq('(min-width: 800px)')) { 

     // script to trigger 
     $('.dropdown').on('mouseenter mouseleave click tap', function() { 
     $(this).toggleClass("open"); 
     }); 

    } 
    }).resize(); 
}); 

Answer 1

可能是因爲你是從resize事件，這將導致的事件觸發的無限循環觸發resize事件。

而且，爲什麼不直接測試屏幕尺寸是多少？

$(function() { 
    $(window).resize(function(){ 

    // Use this for browser width: if(window.innerWidth >= 800) 
    if (screen.width >= 800) { 

     // script to trigger 
     $('.dropdown').on('mouseenter mouseleave click tap', function() { 
     $(this).toggleClass("open"); 
     }); 

    } 
    }); 
});