How to serve up different javascript files by browser width

Question

So I want certain Javascript files for certain browser widths. I know that @media serves up specific CSS per browser width and some devices. How would I do something similar for Javascript files, WITHOUT using server side calls?

Is is possible with Javascript to call other Javascript files based on browser width? If so, How?

Thanks in advance.

Answer 1

var scriptSrc = 'js/defaults.js';
if (screen.width <= 800)
  scriptSrc = 'js/defaults-800.js';
else if (screen.width <= 1024)
  scriptSrc = 'js/defaults-1024.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);

Perhaps? Dynamic-load them based on screen resolution. Could also use document size, browser size, etc. Though I'm not positive you really want to be doing this. Ideally though you should be dealing with relative metrics (like % or em) in your design and avoid this.

Answer 2

While I'm unsure on why, you can always import JavaScript files through JS Script.

The following links give some information on this.

• http://www.kevinleary.net/loadexternal-javascript-jquery-getscript/
• http://www.stackoverflow.com/questions/1140402/how-to-add-jquery-in-js-file
• http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

ON a side note - Why are you looking at doing this? Surely you can get the resolution of the screen and then adjust calculations / content based on those variables without the need to change JS files. There are so many different resolutions (mobile devises, multiple monitors, wide screen, projectors etc.). A user can also re-size the browsers effectively making this not worth it.