Skip to content

Instantly share code, notes, and snippets.

@usaphp

usaphp/javascriptmediaqueries

Created July 1, 2014 12:33
Show Gist options
  • Star 33 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save usaphp/42133e78aa5f8f760a3f to your computer and use it in GitHub Desktop.
Save usaphp/42133e78aa5f8f760a3f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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
}
@breakerfall
Copy link

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment