Description of the API for height and width in javascript

In the JavaScript world, there are many APIs that seem to help us know the width and height of web pages , but they are too numerous and easy to confuse and not easily differentiate. Let me explain what these APIs mean, and where the difference is.

First, the resolution of the device

Window.screen.widthxwindow.screen.height

Desktop: 1440x900/Mobile: 360x640

Second, the resolution of the browser

Window.screen.availWidthxwindow.screen.availHeight

Desktop chrome:1440x860/Mobile: 360x640

Devices and browsers installed on the device do not change as long as they are not changed, their resolution remains the same

In a desktop device, the height of the browser resolution = the height of the device resolution-40px; the width of the device resolution contains the scroll bar width

Three, the window viewport (can see the page area) of the width of the high

Desktop chrome:1440x797/Mobile: 360x518

Window.innerwidth the width of the scrollbar in the desktop device, and the Window.innerheight changes as the menu and the bookmarks Bar are hidden and displayed

IE8 does not support these two properties

You can use these two properties as the basis for a responsive layout

Iv. width and height of document files

Finish

 

Description of the API for height and width in javascript