Optional Javascript Execution based on Media Queries

Question

I'm trying to figure out how I can optionally run a block of javascript based on the current device/media query. I'm using Twitter Bootstrap and have essentially two versions of media queries:

@media (min-width: 980px) { ... } <!-- Desktops -->
@media (max-width: 979px) { ... } <!-- Smaller screens/tablets/phones -->

I have a map that I generate, but am not showing it in the mobile/small screen version forb andwidth reasons. Yet, the javascript still executes in the background even though you can't see it on the mobile screen. So, I'm trying to find a way in javascript where I can do something like:

// Imaginary function
var screenType = getScreenType();

if(screenType == 1) {
   // Load map
}

I've read about people setting CSS properties to specific values in their media queries and then trying to find that element in the DOM based on the CSS property, but there has got to be a better way. Any ideas?

yeradis · Accepted Answer · 2013-08-11 16:55:52Z

33

The current accepted answer is not good enough, you should check window.matchMedia

You can detect viewport dimension changes, but you must calculate factors such as orientation and aspect ratios and there is no guarantee our calculation will match our browser assumptions when it applies media query rules.

I mean, you can calculate X, but your browser assumption can be Y. So i think is better to use same browser rules, and window.matchMedia does it

var jmediaquery = window.matchMedia( "(min-width: 480px)" )
if (jmediaquery.matches) {
    // window width is at least 480px
}
else {
    // window width is less than 480px
}

You can even receive query notification using a listener

var jmediaquery = window.matchMedia("(orientation: portrait)");
jmediaquery.addListener(handleOrientationChange);
handleOrientationChange(jmediaquery);

function handleOrientationChange(jmediaquery) {
    if (jmediaquery.matches) {
        // orientation changed
    }
}

If you no longer need to receive notifications about changes simply call removeListener()

jmediaquery.removeListener(handleOrientationChange);

answered Aug 11, 2013 at 16:55

yeradis

5,3675 gold badges28 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StinkyCat Over a year ago

The accepted answer doesn't let you check the result if you resize your browser window, so for developing purpose, this answer is better. thks!

Kevin Boucher · Accepted Answer · 2012-10-22 16:40:56Z

12

You might find the Enquire.js library helpful:

http://wickynilliams.github.com/enquire.js/

CSS-Tricks article: http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

answered Oct 22, 2012 at 16:40

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

1 Comment

Jeremy Harris Over a year ago

Very useful library, although I'm thinking in my particular instance, pure Javascript is probably the lightest weight solution. Thanking for pointing out Enquire though, I will probably use it in future projects.

frenchie · Accepted Answer · 2012-10-22 16:33:55Z

2

How about using javascript for that?

<script type="text/javascript">

if (screen.width < 980) { 

document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');

} else { 

document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');

} 

</script>

answered Oct 22, 2012 at 16:33

frenchie

52.3k117 gold badges321 silver badges531 bronze badges

6 Comments

jfriend00 Over a year ago

If your window width can be resized, you might need to add monitoring for window width changes?

Jeremy Harris Over a year ago

My primary concern is not wasting bandwidth on mobile devices, so in this case width changes are unlikely to affect my goal.

frenchie Over a year ago

@jfriend00: screen.width or screen.height deal with the size of the display, not the size of the window. The size of the display is fixed by the hardware and cannot change.

jfriend00 Over a year ago

@frenchie - what about when the device is rotated?

frenchie Over a year ago

@jfriend00: good point. I think the OP should check for that: either the values return the same regardless of the orientation of use something like if (Math.Min(screen.width, screen.height)) {...}

|

Carlos Martinez T · Accepted Answer · 2012-10-22 16:38:51Z

1

You can also using a plugin called minwidth:

minwidth(940, function () {
  //do whatever you need
});

But it only works when the page loads not when resizing..

http://edenspiekermann.com/en/blog/responsive-javascript-helpers

answered Oct 22, 2012 at 16:38

Carlos Martinez T

6,5481 gold badge36 silver badges40 bronze badges

Collectives™ on Stack Overflow

Optional Javascript Execution based on Media Queries

4 Answers 4

1 Comment

1 Comment

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related