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

    }
  });
});

Modernizr 媒体查询触发不一致

Modernizr media query triggering inconsistently

javascript

jquery

modernizr