Identifying Browser Window Screen Size & Name with JQuery

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

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);