Only load a javascript file depending on screen size

Question

I'm working on making a website responsive. For now the website will have to have two banners- one for desktop and one fro the mobile site.

I've got everything in place with media querys etc. however I've now noticed that something in the desktop banner javascript file is causing the mobile banner javascript to not function properly.

So I figured I could try to only load the desktop banner js file only if the screen is above a certain size, let's say 1000px.

I'm not sure if that's possible though and how? Or is there some other way to cancel out the desktop js file when the mobile banner is displayed?

Any suggestions are appreciated!

This is very unproductive. Try to do media queries (99% of the issues can be solved by this) or if you really want to do this, try using the `height` and `width` window properties in JavaScript to run pieces/functions of your code. Use this as a reference http://www.w3schools.com/jsref/prop_win_innerheight.asp — CodeTrooper, Jan 20 '16 at 14:29
DO NOT selectively load JavaScript based on screen size. You'd cause network thrashing when resizing a browser, and there is no way the savings of removing the few bytes of JS to a separate file is worth it. — Evan Davis, Jan 20 '16 at 14:37
I would heavily recommend you finding why desktop banner js file is breaking the mobile banner js file. Anything beyond seems hacky including my answer below — daghan, Jan 20 '16 at 14:50

score 4 · Answer 1 · answered Jan 20 '16 at 14:32

4

if (window.innerWidth < 1000) {
   ... mobile banner code
} else {
   ... desktop banner code
}

And if user resizes the window, you are on your own :)

answered Jan 20 '16 at 14:32

daghan

948
10
18

That's why you should use `screen`, not `window`, you can't resize the screen – Ruan Mendes Jan 20 '16 at 14:34
1

@JuanMendes I sure can resize the screen. – John Dvorak Jan 20 '16 at 14:41
I can resize the screen on my cellphone literally by just holding it differently (in some apps, that is). – John Dvorak Jan 20 '16 at 14:43
You should not design based on screen, if user has a wide screen but keeps the browser small, you should render accordingly. – daghan Jan 20 '16 at 14:48

score 2 · Answer 2 · answered Jan 20 '16 at 14:35

You can use screen.width in Javascript

if (screen.width > 1000) {
//load file for screen width 1000 and up here
} else {
//load file for screen width under 1000 here
}

This loads only one of the two files, depending on screen size.

score 1 · Answer 3 · answered Jan 20 '16 at 14:32

If you are trying to load a JavaScript file, you can detect the user agent with navigator.userAgent and load a different script for mobile and other users:

function isMobile() {
  return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
}


function loadScript(url) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  head.appendChild(script);
}

if (isMobile()) {
  loadScript("MOBILE-script.js");
  console.log("mobile script");
} else {
  loadScript("DESKTOP-script.js");
  console.log("desktop script");
}

score 1 · Answer 4 · edited May 23 '17 at 12:07

You could set up flags depending on the window size, everything dimensions information you will need is in the snippet above.

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

Keep in mind that you may need to bind script loading on a resize event handler. I highly recommend using a debouncing pipe function in order to handle resizing more efficiently.

Afterwards you can load scripts using some utility functions as:

function loadScript(url, callback) {
  // Adding the script tag to the head as suggested before
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;

  // Then bind the event to the callback function.
  // There are several events for cross browser compatibility.
  script.onreadystatechange = callback;
  script.onload = callback;

  // Fire the loading
  head.appendChild(script);
}

if (x > 1000) {
  //desktop
  loadScript("desktop.js", myPrettyCode);
} else {
  //mobile tablet
    loadScript("mobile.js", myPrettyCode);
}

Keep in mind that utility libraries like Modernizr have some useful feature detection helpers that may help you. David Walsh has also provided a quite smart way to detecting screen sizes. Also , unloading a script is pretty harsh here is a relevant StackOverflow question

You may also take a look at this question as it may be helpful as well as taking a look at require.js , it's an efficient JavaScript file and module loader.

score 0 · Answer 5 · answered Jan 20 '16 at 14:36

0

Screen size can be retrieved using

screen.availWidth // 1920
screen.availHeight // 1112

answered Jan 20 '16 at 14:36

Ruan Mendes

90,375
31
153
217

Only load a javascript file depending on screen size

5 Answers5

Linked