Vue, JS get screen, browser height width

Vue, JS get screen, browser height width

1. Introduction

1. container

For the display of a page, the containers from the outside to the inside are: the screen, the browser, and the 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 objects of Js.

2. Physical size and resolution

The size of the container refers to the height and width at the current resolution, not the physical height and width.

For example: a 22-inch monitor with a screen resolution of 1366 * 768, then the obtained screen height is 1366px and width is 768px.

3. Display diagram

2. Screen information

1.screen.height : The height of the screen. This is the height of the display screen of the device. The height of the display screen of each model is different. You can check
2.screen.width in the system settings: screen width.
3.screen.availHeight : Available height of the screen. That is, the screen height minus the height of the upper and lower taskbars can be expressed as the height when the software is maximized.
4.screen.availWidth : The available width of the screen. That is, the width of the screen minus the left and right taskbars, which can be expressed as the width of the software when it is maximized.
5. Taskbar height/width: It can be obtained by subtracting the available height/width of the screen from the height/width of the screen. Such as: taskbar height = screen.height - screen.availHeight.

3. Browser Information

1.window.outerHeight : browser height.
2.window.outerWidth : Browser width.
3.window.innerHeight : The available height of the page in the browser; this height includes the height of the horizontal scroll bar (if it exists). It can be expressed as the current height of the browser after removing the browser frame and toolbar.
4.window.innerWidth : The available width of the page in the browser; this width includes the width of the vertical scroll bar (if it exists). It can be expressed as the current width of the browser minus the width of the browser border.
5. Toolbar height/width: including the address bar, bookmark bar, browser border, etc. Such as: height, which can be obtained from browser height - available page height, namely: window.outerHeight - window.innerHeight.

4. Page information

1.body.offsetHeight : The total height of the body.
2.body.offsetWidth : The total width of the body.
3.body.clientHeight : The height displayed by the body; it indicates the height of the area where the body is displayed in the browser.
4.body.clientWidth : The width displayed by the body; indicates the width of the area displayed by the body in the browser.
5. Scroll bar height/width: For example, the height can be obtained from the available height of the page in the browser - the display height of the body, that is, window.innerHeight - body.clientHeight.