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媒体查询触发不一致

1 个答案: