Browser viewport is the part of browser screen that is visible in its window. Often you may need to get browser viewport dimensions to check if a specific part of your web page is visible to your users, or below the fold. In this article, we will learn how to get browser viewport dimensions in JS.
How to Get Browser Viewport Dimensions in JS
There are several ways to get browser viewport dimensions in JavaScript. You can also use third party JS libraries for this purpose.
window.innerWidth and window.innerBreadth values will get you CSS viewport that includes scrollbars. On the other hand, document.documentElement.clientWidth and document.documentElement.clientHeight will return CSS viewport minus scrollbars.
So you can use a combination of both these values.
var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); var vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
You can get the same information using jQuery(window).width() and jQuery(window).height()
In this article, we have learnt how to get browser viewport dimensions.
Also read:
How to AutoResize TextArea to Fit Text
How to Render HTML in TextArea
How to Install PuTTy in Linux
JS Convert Object to String Without Quotes
How to Highlight Text Using JS