Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :

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

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!

  • Facebook
  • Twitter
  • Google+
  • Linkedin