jdsteinbach
7/1/2014 - 12:33 PM

javascriptmediaqueries

// HTML:

<div class="display-type"></div>




// CSS:

// set the content of an element depending on the media query
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  .display-type {
    content: "tablet";
  }
}
@media (max-width: @screen-xs-max) {
  .display-type {
    content: "phone";
  }
}



// JAVASCRIPT

if($('.display-type').css('content') == "tablet"){
  // Actions for tablets
}

if($('.display-type').css('content') == "phone"){
  // Actions for smartphones
}