Get Browser Viewport size with JavaScript

  • Avinash
  • 0
  • Jan 13, 2013
  • Web Development

This is quick article related to JavaScript we will see how we can get browser viewport size using Core JavaScript, MooTools and jQuery.

Core JavaScript

// Get Browser Viewport Width var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // Get Browser Viewport Height var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// Get Browser Viewport Width
var width = window.innerWidth ||
            document.documentElement.clientWidth ||
            document.body.clientWidth;

// Get Browser Viewport Height
var height = window.innerHeight ||
             document.documentElement.clientHeight ||
             document.body.clientHeight;

jQuery

// Get Browser Viewport Width var width = $(window).width(); // Get Browser Viewport Height var height = $(window).height();
// Get Browser Viewport Width
var width = $(window).width();

// Get Browser Viewport Height
var height = $(window).height();

MooTools

// Get Browser Viewport Width var width = window.getSize().x; // Get Browser Viewport Height var height = window.getSize().y;
// Get Browser Viewport Width
var width = window.getSize().x;

// Get Browser Viewport Height
var height = window.getSize().y;

Hope you find this quick tip helpful, Also consider sharing the same thing for other JavaScript frameworks.

Related Posts

Written by Avinash

Avinash Zala currently working at a leading web development company as a Sr. PHP Web Developer. He is the founder of the Xpert Developer. He has completed B.E. in Information Technology. Born and brought up in Ahmedabad. He loves to code and coding is all about passion for him. Follow him on twitter at Avinash Zala & Xpert Developer.

View all posts by: