javascript - Modernizr 媒体查询触发不一致

Question

我试图让我的脚本仅在屏幕尺寸高于特定尺寸(800px)时触发，不仅在加载时触发，而且在屏幕调整大小时触发。

我已将其放入 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");
      });

    }
  });
});