How to Get the Browser Viewport Dimensions
Read this JavaScript tutorial and learn information about two sets of properties that are used to obtain the height and width of the viewport dimension.
There are two sets of properties that help you get the height and width of the viewport dimensions: innerWidth and innerHeight, and clientWidth and clientHeight.
The <kbd class="highlighted">getWindowDims</kbd> function returns an object which contains the width and height properties:
Javascript window dimensions contains the width and height properties
The <kbd class="highlighted">innerWidth</kbd> and <kbd class="highlighted">innerHeight</kbd> are properties of the window object, while the <kbd class="highlighted">clientWidth</kbd> and <kbd class="highlighted">clientHeight</kbd> properties are obtained from the body or documentElement of the document object. The innerWidth and innerHeight properties include the scrollbars in their total measurement, whereas clientWidth and clientHeight measure the content area inside the scrollbars. For mobile devices, window.visualViewport is recommended to get the exact visual viewport size, as clientWidth and clientHeight behavior varies across browsers.