Develop Reference

Get the browser viewport width and height no matter the size of the contents and without sizing to 100%?

Is there a way to get the width and height of the page viewport NOT the contents of a page without setting the body width and height to 100%?
The answers I've found require the html and body elements to be set to 100% width and 100% height.
I already have content on the page that sometimes extends beyond the viewport size. I can't switch the body to 100% and then check the values and then revert back.
In my opinion there should be a property that is simply:
document.body.viewportWidth;
document.body.viewportHeight;
That update on window resize and exclude the chrome.
There are related questions here:
HTML5 Canvas 100% Width Height of Viewport?
Update:
I've been using this:
var availableWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var availableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
It might be that the viewport values are correct but the element itself is growing or shrinking.
I can't find the document.documentElement.clientWidth or document.documentElement.clientHeight in the documentElement docs though.
Update 2:
It looks like it might be an error on my part. I noticed in the logs that occasionally the element has no computed width or height possibly because it hasn't been added to the page yet.
var elementWidth = parseFloat(getComputedStyle(element, "style").width);
var elementHeight = parseFloat(getComputedStyle(element, "style").height);
I think the code I'm already using above is correct.
Update 3:
I found this page on getting the viewport size.

I may not understand your question correctly, but if you're looking for the height and width of the browser window, you could use window.innerHeight and window.innerWidth.
Here is some more information on the window height and width that could be useful.

Does window.innerWidth and window.innerHeight work for you?

Does this help?
document.documentElement.clientWidth
document.documentElement.clientHeight

How to know whether a browser is displaying scrollbar is present or not in reactjs?

I am working on react project. when we make the screen size decrease from large to tiny, a scroll bar is appearing in the browser and as a result my testcases are failing.I wanted to know is there any way we can find whether a scroll bar is displayed in the browser for all types of screen sizes. Also is there any way to get the size of the scroll bar being displayed in the browser?

You can compare the height of your content with the height of the window.
So if (document.body.offsetHeight > window.innerHeight) then the scrollbar would be visible.
UPD:
Regarding scrollbar's sizes. Its width is just a difference between window.innerWidth and document.body.offsetWidth, and its height is equal to window.innerHeight.
So summing up:
let scrollbarSize = {
heigth: window.innerHeight,
width: window.innerWidth - document.body.offsetWidth
}

I would have preferred a comment but I do not have access to that yet.
I am assuming you are talking about height here if not please apply the same solutionwhere appropriate.
To know whether your browser is displaying the vertical scrollbar. Compare the height of the document and the screen height.
Method for the calculation of document height would usually vary across browsers in this case. Use something like this:
let scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
To calculate your window height use:
const windowHeight = documentElement.clientHeight
If your scrollHeight is greater than the windowHeight then you can be most certain that the vertical scrollbar is present.
Therefore it would be easy to detect

In this sandbox I have tested two posible solutions. First approach (ScrollableComponent and hook useIsScrollable) is based on trying to scroll with element. If it does something then you know that it has scrollbar. The second aproach is based on measuring (ScrollableComponentA and hook useIsScrollableA). Measure wrapper element and inner element and compare its height and width.

How to set width and height of canvas to all height and width of browser without overflow?

I want to make a canvas with width and height of document without scrolls, but I don't know how to do this. I tried:
canvas.width = window.innerWidth;
canvas.width = parseInt(getComputedStyle( document.body ).getPropertyValue( 'width' ));
canvas.width = document.body.offsetWidth
canvas.width = document.body.clientWidth
But I got 1-20 unused pixels that I can scroll, also I can't reduce width and height by fixed number of pixels - different browsers show it differently.

Fixed by "display: block", canvas elements aren't blocks by default.

if you're asking how to make an element 100% of the viewport's width and height, you can use CSS...
#selector_id {
width: 100vw,
height: 100vh
}

window.innerWidth gives you the whole width inside the window frame ignoring the scroll bars.
document.body.clientWidth gives you the width inside the vertical scroll bar - if present.
These both work on current versions of Safari and Chrome - I just gave them a quick try.
Both should work on all modern browsers check here for
window.innerWidth and here for document.body.clientWidth.
I'd be interested to know any circumstances where these don't work as advertised.
(Of course if you executed the code exactly as you've shown it you would end up with just the value of document.body.clientWidth. I'm guessing you meant you tried each of them in turn.)

Retrieving viewport height of screen in mobile browsers with jquery

I'm attempting to get the viewport height in mobile browsers WITHOUT the height of the browser bar but all of the solutions I've attempted have come up short.
What others have suggested is using the below, however it does not work for me. I still get a blank white bar at the bottom of the window when scrolling
var screenHeight = window.innerHeight;
$('.mobile-nav-wrapper').height(screenHeight)

I believe what you are looking for is scrollHeight
The scrollHeight property returns the entire height of an element in
pixels, including padding, but not the border, scrollbar or margin.
You can try this:
document.body.scrollHeight

Solution 1:
I don't have an answer using jQuery. But using a plain/vanilla JavaScript wouldn't cause any issue :).
Following script allows you to detect the Viewport size (height and width) reliably.
https://github.com/tysonmatanich/viewportSize
Sample usage:
<script type="text/javascript">
var width = viewportSize.getWidth();
var height = viewportSize.getHeight();
</script>
I have used it in couple of projects, were i have to re-initialize some widgets based on current Viewport width/height rather than using window width/height (Window width/height calculation isn't consistent in all browsers - some include scroll bar size 16px as a part of window width and some doesn't).
Sample Test page:
http://tysonmatanich.github.io/viewportSize/
Solution 2: (Just for reference - Not an answer to OP's question, though it is related so I thought that it can remain)
Well modernizr has a very good addition Modernizr.Mq. Through which you can cross check which break point range you are in...
if(Modernizr.mq("(min-width:320px)")){
//Do job 1
}
else if (Modernizr.mq("(min-width:768px)")){
//Do job 2
}
or
based on height
Modernizr.mq("(min-height: 800px)")
http://tysonmatanich.github.io/viewportSize/

How can I get the browser scrollbar height in javascript

How can I get the browser scrollbar height? Does JS have a built-in function for this case?
Somebody please help me out of this.

There isn't a built-in method for this. However, the scrollbar's height is supposed to give an indication of how much of the available content fits within the available viewport. Going by that, we can determine it like:
var sbHeight = window.innerHeight * (window.innerHeight / document.body.offsetHeight);
Where window.innerHeight / document.body.offsetHeight is the percentage of content visible currently. We multiple that with the available viewport height to get the approximate scrollbar height.
Note: Different browsers may add/reduce some pixels to/from the scrolbar height.

'window.pageYOffset'
returns the current height of the scrollbar concerning the full height of the document.
A simple example of usage is like
alert('Current scroll from the top: ' + window.pageYOffset)

Does this help?
this.document.body.scrollHeight