What are media queries and what are they used for?

Media queries are essentially what allows web developers to style certain elements on the page based on set of conditions.
You could say Media Queries are the css equivalent of If…Else… statements.
We all know all about CSS Media queries but what about Javascript Media Queries?

Media queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012, and is a cornerstone technology of responsive web design.

Media queries as defined by Wikipedia

Media queries allows us to define certain CSS properties based on a set of conditions the users device meets (or does not meet).
The most common use of media queries is to define different styles based on screen size.
This allows us to style the page for a set screen size (mobile devices for example) and then slightly modify the layout once viewed on a desktop device or a tablet.
This is also known as responsive web design.

Why would you need to use media queries in Javascript?

Occasionally, In addition to modifying the pages’ layout on different screen sizes, We would also want to run certain code on certain screen sizes.

For example, Lets assume i have a newsletter signup popup that i want to show to users only if they’re browsing the site on a desktop and laptop devices.

In that case i would need some way to determine the screen size of the device the user is using in order to decide wether or not to show for-mentioned popup.

Approaches to Javascript media queries

There are a few approaches when it comes to determining the user device type in javascript.

I think the most common method is to read the Javascript navigator variable like so:

const userAgent = typeof(navigator) === "object"
	&& navigator.userAgent
	?  navigator.userAgent
	:  "Unknown";

This would return the browsers’ user-agent string and we could use an If…Else or switch statement to determine if its a mobile device, a Tablet or a desktop.

I don’t really like this method, I think it’s a bit messy and it doesn’t work exactly as the CSS Media Queries work.
While the CSS Media Queries differentiates between devices based on actual screen size – This code snippet uses the user-agent string to discern between devices.

Also, new browsers hit the market every day and it seems like way too much work to keep these If…Else statements updated in order to be able to discern mobile devices from tablets & desktops for 100% of the cases.

Is there a way to use CSS Media Queries in javascript?

While there is no “built-in” official way to use CSS Media Queries in javascript, There is a way i found to be very stable and trustworthy to achieve this feature.

My approach is very straight forward:

  1. Create a “dummy” html element at the end of all your pages (If you’re using a CMS you could print it to the page as a part of the footer).
  2. Assign said element with a unique ID (“js-media-query”)
  3. Define a different “float” property to the element based on CSS Media queries (“float: left” on desktop, “float: right” on tablet, “float: none” on mobile).
    I’ve found that the “float” property behaves very consistently in all browsers and that is why i use it.
  4. Define javascript functions to determine which media queries are matched (full demonstration in the image below)
Javascript media queries
How to check for CSS Media queries in javascript

Now you could use these functions to run conditional code based on CSS Media Queries.

Now, Let’s revisit our previous example – a popup that shows only on desktop devices.
We could simply put the “isDesktop” function inside a if statement and show or not show the popup accordingly.

<script>
	if ( isDesktop() ) { showPopup(); }
<script>

Or if you want to be really concise:

<script>
	isDesktop() ) && showPopup();
<script>

Any other use case can be implemented as follows:

<script>
	if ( isDesktop() ) {
		// Code to run on Desktop devices
	} else if ( isTablet() ) {
		// Code to run on Tablet devices
	} else if ( isMobile() ) {
		// Code to run on mobile devices
	}
<script>

Summary

The method i explained in this article becomes very handy once you enable it on all your pages.
It basically enables you to run javascript code based on matched CSS media queries in a very simple and straightforward manner.
It has saved me a great deal of time over the years and i hope i saves a lot of time and headaches for you as well.