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

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>