Slapdash Polyfill for media-query-ish stuff on resize/orientation change

mybreaks.js

$(document).ready(function() {
  
  $(window).bind('resize orientationchange', function() {
    var width           = $(this).width();
    var height          = $(this).height();
    var i_am_currently  = {};
    var breakpoints     = [];
    
    breakpoints[0] = {'name' : 'mobile', 'width' : [0, 480]};
    breakpoints[1] = {'name' : 'wide', 'width' : [481, 10000]};
    
    // Evaluate it
    for (var i = 0; i < breakpoints.length; i++) {
      if (width >= breakpoints[i].width[0] &&
          width <= breakpoints[i].width[1]) {
        i_am_currently[breakpoints[i].name] = true;
      }
      else {
        i_am_currently[breakpoints[i].name] = false;
      }
    }
    i_am_currently['landscape']   = (width > height) ? true : false;
    i_am_currently['portrait']    = (height >= width) ? true : false;
    
    // Add some body classes (or take some away!)
    var thing;
    for (thing in i_am_currently) {
      var css_class = 'currently-' + thing;
      if (i_am_currently[thing]) {
        $('body').addClass(css_class);
      }
      else {
        $('body').removeClass(css_class);
      }
    }
    
    // Now do something
    if (i_am_currently.wide) {
      $('#mobile-nav-link').hide();
    }
    else {
      $('#mobile-nav-link').show();
    }
  }).resize();
});