使用 enquire.js 仅在移动设备的横向上删除事件

Question

我正在使用enquire.js，因此我可以在调整大小时使用带有 javascript 的 CSS 媒体查询而不是事件侦听器，这对 Web 性能来说很难。

我创建了一个触发 scrollWindow() 的事件，仅当手机处于纵向模式时才需要应用该事件。在横向模式下，无论哪个设备处于横向，都需要删除此事件。我真的用媒体查询尝试了不同的公式，我检查了互联网，找不到对我有帮助的解决方案......

这是一个响应式项目，但如果它有帮助，我必须至少针对三星 Galaxy S3 和 iphone4。下面我向您插入我目前拥有的代码：

enquire.register('screen and (max-height: 640px) and (orientation: landscape)', {

    match : function() {
        window.removeEventListener('scroll',scrollWindow);
    },
    unmatch: function(){
        window.addEventListener('scroll',scrollWindow);
    }

});

Answer 1

我想我没看错你的问题，所以让我试着解释一下……

enquire.js 的工作方式是 unmatch 仅在 match 至少触发一次后调用 。

因此，在您的实例中，您只需要反转您的问题 - 让您的媒体查询测试纵向方向，并在匹配时添加事件侦听器，并在不匹配时将其删除。

enquire.register('(orientation: portrait)', {

    match : function() {
        window.addEventListener('scroll',scrollWindow);
    },
    unmatch: function(){
        window.removeEventListener('scroll',scrollWindow);
    }

});

希望有帮助