remove event only on landscape for mobile devices using enquire.js

Question

I'm using enquire.js so I can use CSS media queries with javascript instead of event listener on resize, which is tough for web performance.

I created an event which triggers scrollWindow(), which needs to be applied ONLY if the mobile phone is on portrait mode. On landscape mode, no matter which device on landscape, this event needs to be removed. I really tried different formulas with the media query and I checked the internet and could not find one solution that helps me...

This is a responsive project but if it helps I have to target at least Samsung Galaxy S3 and iphone4. Here below I insert you the code I have as for this moment:

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

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

});

Answer 1

I think I'm reading your question correctly, so let me try to explain...

The way enquire.js works is that unmatch is only called after match has fired at least once.

So in your instance, you just need to invert your problem - have your media query test for portrait orientation, and add the event listener on match, and remove it on unmatch.

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

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

});

Hope that helps