How to get the screen width and height using JavaScript#

The screen resolution of a device can be determined using the screen object. screen.width returns the width of the screen, while screen.height returns the height of the screen.

Your screen resolution
Pixel depth:
<div id="screen">
<div id="screen-info">Your screen resolution</div>
<div>Width: <span id="Width"></span></div>
<div>Height: <span id="Height"></span></div>
<div>Pixel depth: <span id="Pixel"></span></div>
.applet {
  background: #f5f5f5;
.applet-body {
  padding: 10px;
#screen {
  text-align: center;
#screen-info {
  font-size: 19px;
  margin-bottom: 15px;

#screen span {
  font-style: italic;
document.querySelector('#Width').innerText = screen.width + 'px';
document.querySelector('#Height').innerText = screen.height + 'px';
document.querySelector('#Pixel').innerText = screen.pixelDepth;

You may want to determine a user's screen size for various purposes. Eg: extended features for users with large monitors, optimized behavior and functionality on devices with less width and height, etc.

A huge resolution is usually an indirect indication of the available computing resources, accordingly you can customize the behavior of your applications, especially pertaining to background processes.

Note that, screen resolution or the width and height of the screen is different from browser window dimensions. A user with a screen resolution of 2560x1440 may have the browser window resized to 1280x720. For window dimensions refer to /webdev/javascript/browser-window-width-height.html.


screen.width returns the width of the monitor screen. screen.height returns the height of the monitor screen.

Tweet this | Share on LinkedIn |