How to Get the Size of the Screen, Current Web Page and Browser Window in JavaScript

Introduction

Knowing the size of the screen, current web page and browser window can be useful for many web development tasks. In this article, we will look at how to get the size of the screen, current web page and browser window in JavaScript.

Getting the Size of the Screen

The

screen

object in JavaScript contains information about the user’s screen. We can use the

screen.width

and

screen.height

properties to get the width and height of the screen in pixels.

For example, the following code will log the width and height of the screen to the console:

console.log('Screen width: ' + screen.width);
console.log('Screen height: ' + screen.height);

Getting the Size of the Current Web Page

The

document

object in JavaScript contains information about the current web page. We can use the

document.documentElement.clientWidth

and

document.documentElement.clientHeight

properties to get the width and height of the current web page in pixels.

For example, the following code will log the width and height of the current web page to the console:

console.log('Page width: ' + document.documentElement.clientWidth);
console.log('Page height: ' + document.documentElement.clientHeight);

Getting the Size of the Browser Window

The

window

object in JavaScript contains information about the browser window. We can use the

window.innerWidth

and

window.innerHeight

properties to get the width and height of the browser window in pixels.

For example, the following code will log the width and height of the browser window to the console:

console.log('Window width: ' + window.innerWidth);
console.log('Window height: ' + window.innerHeight);

Summary

In this article, we looked at how to get the size of the screen, current web page and browser window in JavaScript. We saw how to use the

screen

document

window

objects to get the width and height of each of these elements in pixels.