October 7, 2021

How to Get Screen Size in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to get screen size in javascript. As you already know, there are various types of devices which can be used to browse over the internet such as mobile, tablet, desktop, or laptop. All these devices have different screen sizes.

Keeping screen size in mind you may or may not want to show certain sections of the website on a certain device. We do have CSS media queries as a solution for this problem and they are extremely helpful when it comes to making a website responsive.

But when we talk about toggling the visibility of elements or executing a certain piece of code on certain screen size, then javascript along with CSS could be a perfect choice.

The screen size indicates the height and width of your actual device. The window size indicates the height and width of your browser window.

The area where you actually see the website content is known as the content area and this area also has a certain size. We are going to cover all 3 of them in this tutorial.

In the following example, we have one button element. Upon click of a button, we will display screen size, browser window size, and content area size. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, hr, and button).
We have 3 empty div elements. We will display different screen sizes in them using javascript.
The hr element is just a divider between button and div elements.
The button element has “Get Size” as innerText.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button>Get Size</button>
    <hr>
    <div id="screenSize"></div>    
    <div id="windowSize"></div>  
    <div id="contentSize"></div>    
      
    <script src="script.js"></script>
</body>
</html>

Javascript

We have selected the button element and all the div elements using the document.querySelector() method and stored them in the btn, screenSize, windowSize, and contentSize variables respectively.
We have attached a click event listener to the button element.
In the event handler function, we are getting device screen size using the height and width property of the screen object and displaying that in the first div element.
We are getting browser window size using outerHeight and outerWidth property of the window object and displaying that in the second div element.
We are getting content area size using the innerHeight and innerWidth property of the window object and displaying that in the third div element.

let btn = document.querySelector('button');
let screenSize = document.querySelector('#screenSize');
let windowSize = document.querySelector('#windowSize');
let contentSize = document.querySelector('#contentSize');

btn.addEventListener('click', () => {
    screenSize.innerText = `Screen Height: ${screen.height} - Screen Width: ${screen.width}`;
    windowSize.innerText = `Window Height: ${window.outerHeight} - Window Width: ${window.outerWidth}`;
    contentSize.innerText = `Content Height: ${window.innerHeight} - Content Width: ${window.innerWidth}`;
});

You May Also Like: