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!

Related Posts