How Can I Get Screen, Web Page, and Browser Window Dimensions in JavaScript?

Determine Window and Screen Dimensions in Various Browsers

Obtaining the dimensions of the screen, web page, and browser window can be crucial for various web development tasks. Thankfully, there are multiple approaches to achieve this across major browsers.

Screen Dimensions

To obtain the dimensions of the user's screen:

• Modern Browsers:

  window.screen.height;
  window.screen.width;

Web Page Dimensions

For the dimensions of the web page, you can utilize:

• Modern Browsers:

  window.innerHeight;
  window.innerWidth;

Browser Window Dimensions

To determine the browser window's dimensions:

• jQuery:

  // Size of browser viewport.
  $(window).height();
  $(window).width();

In addition to the mentioned dimensions, you can also obtain the following values:

• pageX, pageY: Page coordinates of the user's mouse cursor.
• screenX, screenY: Screen coordinates of the user's mouse cursor.

Legacy Approach

Prior to the standardization of window.screen and window.innerWidth, you could use the jQuery library to calculate the dimensions. However, these methods have been deprecated and are no longer recommended:

• Page Dimensions:

  $(document).height();
  $(document).width();

The above is the detailed content of How Can I Get Screen, Web Page, and Browser Window Dimensions in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!