获取浏览器视口的宽度和高度，无论内容的大小如何，并且不调整为 100%？

Question

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.

Answer 1

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.

Answer 2

Does this help?

document.documentElement.clientWidth
document.documentElement.clientHeight

Answer 3

window.innerWidth和window.innerHeight对你有用吗？