Get the size of the screen, current web page and browser window

In JavaScript, retrieving the sizes of the screen, current webpage, and browser window can be achieved in multiple ways. Here, I will explain how to retrieve each dimension separately and provide relevant code examples.

1. Retrieving the Screen Size

Use the screen object to obtain the user's screen dimensions. The screen object contains properties related to the user's screen, such as width and height.

javascript
var screenWidth = screen.width;
var screenHeight = screen.height;
console.log("Screen width: " + screenWidth + "，Screen height: " + screenHeight);

2. Retrieving the Current Webpage Size

Retrieving the size of the current webpage typically refers to the actual dimensions of the page content, which can be accessed via document.documentElement. Using the scrollWidth and scrollHeight properties retrieves the total width and height of the content.

javascript
var pageWidth = document.documentElement.scrollWidth;
var pageHeight = document.documentElement.scrollHeight;
console.log("Page content width: " + pageWidth + "，Page content height: " + pageHeight);

3. Retrieving the Browser Window Size

Retrieving the viewport size—defined as the area within the browser window available for displaying content—can be done using the window.innerWidth and window.innerHeight properties.

javascript
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
console.log("Browser window width: " + windowWidth + "，Browser window height: " + windowHeight);

Example Application Scenario

Suppose we are developing a responsive webpage design that requires adjusting the layout based on different device screen sizes. Using the above code, we can retrieve the user's screen size and browser window size, then apply different CSS styles or JavaScript functionality through conditional checks to ensure the webpage displays and operates correctly across various devices.

For example, if the browser window width is less than 768 pixels, we might set the webpage to mobile view mode:

javascript
if (window.innerWidth < 768) {
    // Apply mobile view CSS
    document.body.className += " mobile-view";
}

This covers the methods for retrieving screen, webpage, and browser window sizes along with their application scenarios. I hope this is helpful for you!