JavaScript Get Viewport Width and Height

Are you finding a way to get viewport width and height in JavaScript? You can achieve this with just a few lines of JavaScript code. This tutorial will show you step by step process with examples.

Let’s see how to do this.

How to Get Viewport Width and Height using JavaScript

To get the current viewport width in JavaScript, we use the window object with .innerWidth and .innerHeight properties. The following code shows how to get viewport width and height in JavaScript.

    // storing width and height values in variables
    var width = window.innerWidth;
    var height = window.innerHeight;

    // code to display viewport width and height on screen
    document.write(width + " x " + height);

The code will show the current width and height of your browser window. The output on my laptop is shown below, however, your browser window size might be different in that case you will see different values.

JavaScript Get Viewport Width and Height

Note: The width and height values are in pixels.

Moreover, the above code will show the fixed viewport width and height of the current screen or window. But what if you resize your browser window? Then, the values remain the same. But you might expect the change. Here we recommend another appropriate way that will dynamically update the values of width and height if you resize your browser screen.

To get the viewport width and height dynamically in JavaScript, we use an event listener. The following code shows how to do it.

    // creating a function to handle viewport change
    function viewportHandler(){
        document.write(window.innerWidth + " x " + window.innerHeight);

    // Adding eventlistner for window resize
    window.addEventListener("resize", viewportHandler);

    // Calling viewportHandler() function when resize occurs

Code Explanation:

  • First, I created a function that will be called when the resize event occurs.
  • Then, I added the event listener for window resizing.
  • And the last line of code will make a function call when the event will occur.

Note: After resizing your browser window, you have to refresh the web page to see the output.

Benefits of Getting Viewport Width in JavaScript

The major benefits of getting the viewport width and height in JavaScript are the following:

  • It empowers front-end developers to create responsive web designs by checking the width and height of different screen sizes of any device.
  • You can precisely position elements.
  • Utilize media queries effectively, and enhance user interaction.
  • By accessing the viewport width and height, you can adapt your website layout and content dynamically, ensuring optimal presentation across different devices and screen resolutions.

That’s all. This is how to get viewport width in JavaScript. If you have questions feel free to ask in the comments sections below.

Also read, how to disable right-clicking on the website using JavaScript.

Help others by sharing this tutorial!