How to get the dimensions of browser viewport in JavaScript
If you are a website developer who builds responsive websites or learning to do so, you most probably have come across the term "browser viewport".
For instance, as a requirement to develop responsive web pages, you are required to add the line below in your web pages <head> section.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The viewport <meta> tag was introduced in HTML5 to allow web designers to take control over the viewport.
But you may still wonder what the browser viewport is.
In this article, you will learn what browser viewport is and how to get its dimensions using JavaScript.
What is a browser viewport?
Browser viewport refers to the visible area available to a webpage or a document inside a browser window. It is equal to the whole browser window minus the browser's interface (such as address bar, title bar, menu bar, etc.).
The image below shows the screenshot of a browser window of this website's homepage, with the viewport highlighted with a red border.
While the contents of the <head> section of an HTML code is either hidden from view or shown on the title bar (eg. the page title and favicon), all the content of the <body> section is displayed in the browser viewport.
The viewport size varies with the device screen size. Small devices such as mobile phones have by far smaller viewport as compared to large devices such as desktop computers.
The size of the viewport does not entirely depend on the device screen size, but on the size of the browser window. The browser viewport size varies in proportion to the browser window. On resizing the browser window to a small size, so does the viewport minimize and vice versa.
How to get the browser viewport dimensions
The easiest way to do that is to visit the What is my viewport (https://whatismyviewport.com/) website.
It will show your browser viewport size in terms of width and height in pixels (px) as in the screenshot below:
While the screen size values above remain constant throughout, you will notice that on resizing the browser window the viewport size width and height keep changing.
Getting the viewport dimensions in JavaScript
While the method above shows you a simple and quick way to know what your browser viewport dimensions are, you may need something beyond it.
For instance when you want to perform varying actions on your web pages based on the current viewport dimensions. In such a scenario, you will have to use JavaScript code as it allows you to get the viewport dimensions from within the page.
There are two slightly different methods:
Method 1
let width = window.innerWidth;
let height = window.innerHeight;
This method gets CSS viewport @media (width) and @media (height) which include scrollbars width/height. Use this method to get the full browser viewport width and height.
Zooming may cause values to be 1px off due to native rounding.
Method 2
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
This method gets CSS viewport width minus scrollbar width. It matches that of method 1 when the web page has no scrollbar.
Getting viewport dimensions in jQuery
There are also two slightly different methods of getting viewport dimensions in jQuery:
Method 1
let width = $(window).width();
let height = $(window).height();
This method returns the width and height of the browser viewport. This is the region we defined at the top.
Method 2
let width = $(document).width();
let height = $(document).height();
This method is used to get the width and height of an HTML document. It varies from method 1 when the width or height of the web page exceeds those of the browser viewport.
An example to differentiate the two.
For instance, the width of the browser viewport may be 1300px and the width of the page 1370px. To view all the page content, one will be required to scroll to the right. Using method 1 to get the width will return 1300 while method 2 will return 1370. The same concept applies to height property.
That's all for this article!
It's my hope that you found this article helpful. Join our email newsletter or follow us on social media to be notified when we add more helpful articles.
