jQuery - remove div by class when the screen is smaller than 1350px

Question

I am working on a site with parallax scrolling that consists of 4 'pages' on which you can scroll trough by pressing an up or down button.

The first 'page' contains a video background. There is no need for this 'page' to be visible on tablet and mobile. I can hide this 'page' by using media queries, but this breaks the parallax scrolling functionality as the script of this functionality still sees the hidden div.

So to not show the page, I thought the best way was to fully remove the div. Since this can't be done by Media Queries i'm searching for a way with jQuery to remove the div by class when the screens width is smaller than 1350px

Any idea will be appreciated!

Answer 1

You should use window.matchMedia:

$(function(){
    if (window.matchMedia("(max-width: 1350px)").matches) {
        $('div.myClass').remove();
    }
});

CanIUse

Polyfill