Go: HTML Gets the height width of the screen, browser, page

This article mainly introduces the height and width information of screen, browser and page in Web environment.

Directory

1. Introduction: Introduce the container of the page (screen, browser and page), physical size and resolution, display and other content.

2. Screen information: Introduction of screen size information, such as: screen, software available, and the height and width of the taskbar.

3. Browser information: Describes browser size information, such as: browser, internal pages, and the height and width of the toolbar.

4. Page information: Describes the HTML page size information, such as: Body total, the height and width of the display.

First, Introduction 1. Container

The display of a page, from the outside to the inside of the container is: screen, browser and the page itself.

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

The height and width of these containers can be obtained by some objects of JS.

2. Physical size and resolution

The size of the container is the height and width of the current resolution, not the physical height or width.

such as: A 22-inch display, the screen resolution of 1366 * 768, then get to the screen height of 1366px, width of 768px.

3. Display diagram

Second, the screen information

screen.height: screen height.

screen.width: screen width.

screen.availheight: screen available height. That is, the height of the screen height minus the upper and lower taskbar, which can be expressed as the height when the software is maximized.

screen.availwidth: screen available width. That is, the width of the screen minus the left and right taskbar, which can be expressed as the width when the software is maximized.

taskbar height/width: can be obtained by screen height/width minus screen available height/width. such as: taskbar height = screen.height-screen.availheight.

Third, browser information

window.outerheight: browser height.

window.outerwidth: browser width.

window.innerheight: The height of the page available in the browser, which contains the height of the horizontal scrollbar, if one exists. can represent the height of the browser border and the toolbar after the browser's current height is removed.

window.innerwidth: The width of the page available in the browser, which contains the width of the vertical scroll bar, if present. can represent the width of the browser border after the browser's current width is removed.

Toolbar Height/width: contains the address bar, bookmarks Bar, browser border and other scopes. such as: height, can be obtained by browser height-page available height, namely: window.outerheight-window.innerheight.

Iv. Page Information

body.offsetheight:body total height.

body.offsetwidth:body total width.

body.clientheight:The height of the body display, indicating the height of the body in the browser.

body.clientwidth:The width of the body display, which indicates the width of the body in the browser.

ScrollBar Height/width: such as height, can be obtained by using the height of the page available in the browser-body display height, namely window.innerheight-body.clientheight.

Go: HTML Gets the height width of the screen, browser, page