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.

Answer 3

Try this:

var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")

if (window.document.body.clientWidth == XXX) {
    fileref.setAttribute("src", "script1.js")
} else {
    fileref.setAttribute("src", "script2.js")

}

Answer 4

Media queries are a good solution for providing alternative styles for different window widths. Unfortunately, there is no media attribute for the <script> element to proceed similarly.

You can, however, provide a script-loading script which will load desired .js file depending on the style sheet selected by the browser on the basis of your media query. I don't know how to do this in a direct, elegant way but there is a nice hack for that. You have to "mark" each .css with a unique declaration (dummy, unimportant or different by design) and check it from within JS after the page has loaded to determine which style sheet has been applied by the browser.

The HTML could look like this:

<style media="handheld, screen and (max-width:1023px)">
    body { margin-top: 0px }
</style>
<style media="screen and (min-width:1024px)">
    body { margin-top: 1px }
</style>

And the accompanying JS as follows:

function onLoad() {
    var head = document.getElementsByTagName('head')[0];
    var body = document.getElementsByTagName('body')[0];
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top');

    var script = document.createElement('script');
    script.setAttribute('src', mark=='0px' ? 'handheld.js' : 'screen.js');
    head.appendChild(script);
}

This does the job, but only on a per-load basis. To get a responsive reaction to resizing the browser's window by the user, you should keep track on the widow's width and reload the page when necessary.

Answer 5

Since 2011 the world has shifted into the mobile era.

You might wanna try with: document.documentElement.clientWidth, as it will tell you the visible area of your page - it reacts to zoom but not to pitch.