THATBlog

Bootstrap breakpoints and media queries have been around the CSS world for a long time, but did you know that Javascript has a built-in method that allows you to perform a similar query to the browser window? And actually, it’s really easy to deploy! Here’s a media query example to help you get started...

JavaScript Media Query Example

Write your query as follows:

var x = window.matchMedia( “(min-width: 768px)” ).matches;

When this media query is passed to the Javascript matchMedia() method, after analyzing the parameters, it returns true if the specified conditions are a match.

In other words, if you pass a media query specifying “min-width:768px,” a Boolean true would be returned if the window object reports a width greater than 768 pixels. If the window object reports a width less than 768 pixels, a Boolean false would be returned.

Any valid Bootstrap breakpoints and CSS media queries will work with this method, so get crazy with the Cheez Whiz and query the browser to your heart’s desire!

Here is a real-world media query example of how you can use this handy method to run Javascript on either mobile only or desktop only:

// Assign the result of the media query to a variable

var x = window.matchMedia("screen and (max-width:480px)").matches;

// Check if the media query is a match

If ( x ) {

    // Run javascript for mobile only

} else {

    // Run javascript for sizes above mobile

}

Other Media Query Examples

These are some examples of other media queries that you can use with the Javascript matchMedia() method:

“screen and (min-width: 768px)”

“screen and (max-width: 992px)”

“screen and (min-height: 600px)”

“screen and (max-height: 400px)”

“screen and (orientation: landscape)”

“(min-resolution: 150dpi)”

“(max-resolution: 72dpi)”

And here is a great reference resource for learning to write valid media queries:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

I personally use the Javascript matchMedia() method all the time when I need to fire certain functions on mobile only or desktop only.

For example, let’s say you have a navigation bar that uses CSS to collapse down to a drop-down menu on mobile screens. You could use this matchMedia() method to fire your Javascript for the drop-down menu, but only if the user is visiting your site from a mobile device. Otherwise, if the visitor is not on a mobile device, a different script could fire - or possibly no script could fire at all.

In conclusion, the matchMedia() method is a great way to fire Javascript based on Bootstrap breakpoints and CSS media queries. And since the method accepts any valid CSS media query, it opens up a lot of interesting options to get around certain problems.

Need help with website development? Call THAT Agency today at 561-832-6262.