Skip to content

Instantly share code, notes, and snippets.

@matherton
Last active September 3, 2015 15:38
Show Gist options
  • Save matherton/2dba558b69adb0bdf6cf to your computer and use it in GitHub Desktop.
Save matherton/2dba558b69adb0bdf6cf to your computer and use it in GitHub Desktop.
JS resize function for mobile and tablet
$(window).resize(function() {
//var viewportWidth = $(window).width(); jQuery selector has inconsistencies with Media Queries
var viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // JS better consistency with Media Queries
/*Mobile view*/
if (( viewportWidth <= 600 ) || ( viewportWidth > 776 ) && (viewportWidth < 921)) {
//Setup Markup to add attribute requirements for mobile
console.log( "on mobile" );
}
/*Descktop view */
else {
console.log( "NOT on mobile" );
}
});
$(window).trigger('resize');
@matherton
Copy link
Author

After doing a bit of testing/googling turned out that using JS to define the viewport was more consistent than jQuery. After a bit more trial and error it appears that using jQuery like so:
var viewportWidth = $(window).outerWidth(true);
is just as good as defining the viewportWidth var with JS

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