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?

Answer 1

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);

Answer 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>