Add class for responsive css design without Media Query (is not so good).

miniResponsiveClass.js

var elHtml = document.getElementsByTagName('html')[0], initialClass = elHtml.getAttribute('class');
function deviceType() {
  var deviceType;
  if ("devicePixelRatio" in window && window.devicePixelRatio > 1) { deviceType = ' retina'; }
  else { deviceType = ' no-retina'; }
  return deviceType;
}
function deviceOrientation() {
  var deviceOrientation;
  if (Math.abs(window.orientation) === 90) { deviceOrientation = ' landscape'; }
  else { deviceOrientation = ' portrait'; }
  return deviceOrientation;
}
function viewportSize() {
  var viewportSize, viewportWidth = window.innerWidth;
  if (viewportWidth <= 1024) { viewportSize = ' tablet'; }
  else if (viewportWidth >= 1024) { viewportSize = ' descktop'; }
  return viewportSize;
}
function setHtmlClass() {
  newClass = deviceType() + deviceOrientation() + viewportSize();
  elHtml.setAttribute('class', initialClass + newClass);
  alert(newClass);
  return newClass;
}
setHtmlClass();
window.onorientationchange = function(event) { setHtmlClass(); }
window.onresize = function(event) { setHtmlClass(); }