14

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

Doug Fir
  • 14,921
  • 39
  • 121
  • 228
  • you might wanna refer to this: http://stackoverflow.com/questions/2053695/disabling-a-javascript-script-when-loaded-on-a-smart-phone – Sal May 09 '12 at 01:30
  • thanks I followed the link. Disappointing to see that it says the script will load anyway, I was hoping to improve/help load times/data use on mobile by not running script on mobile. So reading whats there if I was to write: – Doug Fir May 09 '12 at 01:36
  • you can check the `screen size` through `js` and then only load `scripts` that are needed `dynamically`..I'll write you a quick one! – Sal May 09 '12 at 01:46

5 Answers5

26

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.

RobG
  • 124,520
  • 28
  • 153
  • 188
13

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

Community
  • 1
  • 1
Dave
  • 1,119
  • 1
  • 13
  • 14
  • I guess this is a better solution because there are already a lot Full HD mobile devices out there. – ed1nh0 Dec 16 '13 at 12:42
  • 3
    User-agent tests are the worst possible way to check for something. Use `window.devicePixelRatio` to check for high-density displays. – Ry- Aug 21 '14 at 19:01
  • @Ry actually your method will fail in many cases, such as a retina macbook. ( just wanting to update the knowledge on this old thread ) – Steven Stark Mar 27 '19 at 20:54
  • @StevenStark: Eh? `devicePixelRatio` should be 2 on a Retina MacBook. (I am typing this from a Retina MacBook and just checked.) – Ry- Mar 27 '19 at 23:05
  • @Ry This is pretty old, but devicePixelRatio won't nab older ios (pre retina) nor blackberry. Kind of outlier cases but nonetheless, my way is way better than your way. – Dave Mar 28 '19 at 00:29
  • @Dave: That’s the point – distinguishing pre-Retina from Retina and so on. It’s irrelevant anyway, though, because the other answers work fine on Retina displays already. (They measure CSS pixels, not physical ones.) – Ry- Mar 28 '19 at 00:36
8

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

marcus
  • 610
  • 7
  • 23
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.

Derek 朕會功夫
  • 84,678
  • 41
  • 166
  • 228
0

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>');
}
user3423593
  • 27
  • 4