determine_css.js

(function(w, d) {
  // Empty path to CSS file
  // to determine later on.
  var path;

  // Create empty: <link rel="stylesheet" id="adaptive_css" />
  var css = d.createElement('link');
  css.rel = 'stylesheet';
  css.id = 'adaptive_css';

  // Parse browser width.
  function get_width() {
    var x = 0;

    // Smooth out browser differences.
    if (w.innerHeight) {
      x = w.innerWidth;
    }
    else if (d.documentElement && d.documentElement.clientWidth > 0) {
      x = d.documentElement.clientWidth;
    }
    else if (d.body) {
      x = d.body.clientWidth;
    }

    return x;
  }

  // Determine CSS file.
  function determine_css() {
    var x = get_width();
    var el = d.getElementById('adaptive_css');

    if (x <= 480) {
      // 480.css
      path = '/path/to/480.css';
    }
    else if (x > 480 && x < 960) {
      // 800.css
      path = '/path/to/800.css';
    }
    else if (x >= 960 && x < 1280) {
      // 960.css
      path = '/path/to/960.css';
    }
    else if (x >= 1280 && x < 1600) {
      // 1280.css
      path = '/path/to/1280.css';
    }
    else if (x >= 1600) {
      // 1600.css
      path = '/path/to/1600.css';
    }

    // Did we already create it?
    if (!!el && el.href !== path) {
      // If so, just set the path.
      el.href = path;
    }
    else {
      // If not, set path and append to DOM.
      css.href = path;
      d.getElementsByTagName('head')[0].appendChild(css);
    }
  }

  // Fire off once.
  determine_css();

  // Wire up basic event handlers.
  w.onresize = w.onorientationchange = determine_css;

// Pass in window, document.
})(this, this.document);