Simple function will tell you how to identify your browser screen size & name using jQuery. This function is very useful to build responsive layouts for web designers.

Check out my previous post about Responsive Design – display different contents for the different devices with CSS

Finding Screen Size with Jquery

Finding Screen Size with Jquery

Jquery Code

function getScreenName() {
	var screen_name = '',
		screen_w = jQuery(window).width();

	if ( screen_w > 1170 ) {
		screen_name = "desktop_wide";
	}
	else if ( screen_w > 960 && screen_w < 1169 ) {
		screen_name = "desktop";
	}
	else if ( screen_w > 768 && screen_w < 959 ) {
		screen_name = "tablet";
	}
	else if ( screen_w > 300 && screen_w < 767 ) {
		screen_name = "mobile";
	}
	else if ( screen_w < 300 ) {
		screen_name = "mobile_portrait";
	}
	return screen_name;
}
//usage
var screen_name = getScreenName();
alert(screen_name);

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/04/Screen-Size-Jquery.pnghttp://w3lessons.info/wp-content/uploads/2013/04/Screen-Size-Jquery-150x150.pngKarthikeyan KjqueryJquery,responsive
Simple function will tell you how to identify your browser screen size & name using jQuery. This function is very useful to build responsive layouts for web designers.Check out my previous post about Responsive Design – display different contents for the different devices with CSSJquery CodePlease don’t forget to share and subscribe...