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
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.