set_responsive_class.js

/*
  Usage in CSS:
  body[data-viewport="mobile"] etc..
*/


function set_responsive_class(viewportwidth){
  
  /* Small phones */
  if (viewportwidth <= 480) {
    $("body").attr("data-viewport", "mobile");
  
  /* Big phones */
  } else if (viewportwidth <= 767) {
    $("body").attr("data-viewport", "mobilelarge");
  
  /* Tablet portrait */
  } else if (viewportwidth <= 979) {
    $("body").attr("data-viewport", "tabletportrait");
  
  /* Desktop small and tablet landscape */
  } else if (viewportwidth <= 1200) {
    $("body").attr("data-viewport", "tablet");
  
  /* Desktop above 1200px wide */
  } else {
    $("body").attr("data-viewport", "desktop");    
  }
}

$(window).resize(function() {
  set_responsive_class(document.documentElement.clientWidth);
});