I am trying to use the media attribute to only link my javascript files on to mobile devices, not on desktop ones.
Here's my link tag:
<script type="text/javascript" media="screen and (max-width : 850px)" src="mobile.js"></script>
But this isn't working, it links to JS to everything.
How do I only link a JS file if it meets those query conditions?
If I can't how do I only run JS if it is on mobile?
I am trying to use the media attribute to only link my javascript files on to mobile devices, not on desktop ones.
Here's my link tag:
<script type="text/javascript" media="screen and (max-width : 850px)" src="mobile.js"></script>
But this isn't working, it links to JS to everything.
How do I only link a JS file if it meets those query conditions?
If I can't how do I only run JS if it is on mobile?
Share Improve this question asked Sep 22, 2013 at 17:02 Joshua SoileauJoshua Soileau 3,0159 gold badges43 silver badges52 bronze badges3 Answers
Reset to default 11How about using javascript for that?
<script type="text/javascript">
if (screen.width < 980) {
document.write('<script type="text/javascript" src="mobile.js"></script>');
}
</script>
There are two ways you can do this:
- Have all of your scripts on the page already and invoke them when the breakpoints are triggered
- Load your scripts only when they are needed, once a breakpoint is met
Either way, you will need this:
enquire.js
This will allow you to add media queries callbacks for js.
Light weight and works everywhere w/o the overhead.
if (document.documentElement.clientWidth < 900) { // scripts }