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
}

I saw jeremenicheills comment and why not work with the code something like this? I think it is slightly more structured, little bit more code but can be used multiple times without doing tons of DOM search for the class display-type etc.

// JAVASCRIPT
$(function() {
    var displayType = function() {
        return $('.display-type').css('content');
    }

    var display = displayType();
    $(window).on('resize', function() {
        display = displayType();
    })

    if(display == "tablet"){
      // Actions for tablets
    }

    if(display == "phone"){
      // Actions for smartphones
    }
});

@murum I'm afraid your code does not have any DOM access improvements. You should consider saving the element in a variable. :) Also, debounce your resize handler.
My 0.02

Awesome technique!

Jeremy Keith wrote a bit about this technique too, back in the day

http://adactio.com/journal/5429/