tell html doc not to load js if mobile device

Question

I'm cheekily seeking a line or two of code on the fly here:

Could someone be kind enough to provide code to place in the head section of html doc that says if mobile then do not load JS?

This is being used in conjunction with the following CSS media query:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="m/styles_mobile.css" />

So I'm looking for a piece of code that is based on the same rule: media="only screen and (max-device-width: 480px)"

Would be very grateful

Answer 1

Now it's possible to use window.matchMedia

if (window.matchMedia("(min-width: 480px)").matches) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}

https://developer.mozilla.org/docs/Web/API/Window/matchMedia http://caniuse.com/#feat=matchmedia

Answer 2

Given: "if mobile then do not load JS", and presuming "mobile" is defined by screens with a width of 480 pixels or less, then something like the following should work:

<script>
if (screen && screen.width > 480) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}
</script>

That will add the script element only if the screen is greater than 480 pixels wide.

The CSS rule in the OP is:

<... media="only screen and (max-device-width: 480px)" ...>

which will target screens of 480 pixels or less, which is contrary to to the first statement. Therefore change > to <= if the script should run on small screens and not run on larger ones.

Answer 3

The best way to do it would be to add it around whole the actual mobile script inside the "foo.js" file. The DOM will have trouble loading the tag if you suddenly append it.

if (screen && screen.width > 480) {
 // Whole your script here
}

Instead of:

if (screen && screen.width > 480) {
  document.write('<script type="text/javascript" src="foo.js"><\/script>');
}

Answer 4

I'm not sure how the previous answers would go with retina displays. I would do something like:

if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))
 document.write('<script type="text/javascript" src="foo.js"><\/script>');

snippet from here

Answer 5

You can do it like this.

1. Test the screen width and height to see if it is a mobile device.
2. Load in scripts using JavaScript.

What you can do is this:

var scripts = ["foo.js",       //Put all your scripts here.
               "bar.js"];

if(screen.width <= 480){
    for(var i=0;i<scripts.length;i++){
              //-with jQuery (one line!)-
        $("head").append('<script type="text/javascript" src="'+scripts[i]+'"><\/script>');
                 //-or jQuery free-
        var scriptEle = document.createElement("script");
        scriptEle.setAttribute("type","text/javascript");
        scriptEle.setAttribute("src",scripts[i]);
        document.getElementsByTagName("head")[0].appendElement(scriptEle);
    }
}

Notice it is screen.width <= 480.