Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
responsive design helper function for javascirpt
/*
* Returns the different properties (Boolean) useful while responsive
* design.
*/
function screenMatches() {
var s = {};
if (window.matchMedia) {
/* Large desktop */
s.largeDesk = window.matchMedia("(min-width: 1200px)").matches;
/* Usual desktop */
s.usualDesk = window.matchMedia("(min-width: 980px) and (max-width: 1199px)").matches;
/* Portrait tablet to landscape and desktop */
s.tabAndDesk = window.matchMedia("(min-width: 768px) and (max-width: 979px)").matches;
/* Landscape phone to portrait tablet */
s.uptoPortTab = window.matchMedia("(max-width: 767px)").matches;
/* Landscape phones and down */
s.uptolandPh = window.matchMedia("(max-width: 480px)").matches;
}
return s;
}
/*
* ======
* USAGE
* ======
*/
if ( screenMatches().tabAndDesk ) {
// Do something
} else {
// something, something...
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment