Use HTML to get the height, width, and width of pages, screens, and browsers

Use HTML to get the height, width, and width of pages, screens, and browsers

This article describes the height and width of screens, browsers, and pages in the Web environment.

Directory

1. Introduction: This section describes the container (screen, browser, and page), physical size, resolution, and display of the page.

2. screen information: displays the screen size information, such as the screen size, software availability, and the height and width of the taskbar.

3. browser information: This section describes the browser size information, such as the height and width of the browser, internal page, and toolbar.

4. Page Information: This section describes the HTML page size information, such as the total size of the body, the height and width of the display.

 

1. Introduction 1. Container

A page is displayed. containers from the outside to the inside are: screen, browser, and page itself.

HTML elements are displayed on the page, the page is displayed on the browser, and the browser is displayed on the screen.

The height and width of these containers can be obtained through some Js objects.

 

2. physical size and resolution

The container size refers to the height and width of the current resolution, rather than the physical height and width.

For example, if the screen resolution of a 22-inch display is 1366*768, the obtained screen height is 1366px and the width is 768px.

 

 

QQ Group for front-end learning and communication: 461593224

3. display a chart

 

Ii. screen information

Screen. height:Screen height.

Screen. width:Screen width.

Screen. availHeight:The available height of the screen. That is, the screen height minus the height after the upper and lower taskbar can be the height when the software is maximized.

Screen. availWidth:Available screen width. That is, the screen width minus the width after the Left and Right taskbar can be expressed as the width when the software is maximized.

Taskbar height/width:You can use the screen height/width minus the available height/width of the screen. For example, the taskbar height is screen. height-screen. availHeight.

 

3. browser Information

Window. outerHeight:Browser height.

Window. outerWidth:Browser width.

Window. innerHeight:The available height of the page in the browser; this height contains the height of the horizontal scroll bar (if any ). The height of the browser's border and toolbar can be removed from the current height of the browser.

Window. innerWidth:Available width of the page in the browser; this width contains the width of the vertical scroll bar (if any ). It can be used to remove the Border width of the browser.

Toolbar height/width:Includes the address bar, Bookmarks Bar, browser border, and so on. For example, the height can be obtained through the browser height-Available page height, that is, window. outerHeight-window. innerHeight.

 

Iv. Page Information

Body. offsetHeight:Total body height.

Body. offsetWidth:Total body width.

Body. clientHeight:The height of the body display area in the browser.

Body. clientWidth:Body display width, indicating the area width of the body displayed in the browser.

Scroll Bar Height/width:For example, the height can be obtained through the height-body display height on the page in the browser, that is, window. innerHeight-body. clientHeight.

 

 

The front-end student paid attention !!!
If you have any questions during the learning process or want to obtain learning resources, please joinQQ Group for front-end learning and communication: 461593224Let's learn the front-end together!