How to remove script for responsive media queries?

[PicnicTutorials]

Hello. I just need to remove a certain JavaScript block when the screen size gets below a whatever value. I got the media queries and all that jazz down pat I just don’t know how to stop that JavaScript. Thanks.

[JeroenR]

Check this: https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript

You can use a condition on the width of your window maybe in your javascript?

[bclovis]

If I need to match a media query in css, I usually do a window.matchMedia check:

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

[PicnicTutorials]

Thanks guys. So I found a solution.

Using jquery then say…

if ( $(window).width() > 739) {
//Add your javascript for large screens here
}
else {
//Add your javascript for small screens here
}

Question though. Does the above do the exact same thing as the code below? Or is one better

if (window.matchMedia(“(min-width: 400px)”).matches) {
/* the viewport is at least 400 pixels wide /
} else {
/ the viewport is less than 400 pixels wide */
}

[PicnicTutorials]

aside from the different values of course

[Shikkediel]

Not exactly… when there’s a consistent scrollbar, it is included in the window width but not necessarily in the media query. But there won’t be scrollbars on mobile screens so it’ll have the same outcome.

[Author]

Posts