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

admin管理员组

文章数量:1399986

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

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

• javascript
• html
• css

Share Improve this question Follow edited Dec 7, 2019 at 16:48 1.21 gigawatts asked Dec 6, 2019 at 18:01 1.21 gigawatts1.21 gigawatts 17.9k4040 gold badges145145 silver badges273273 bronze badges 2

• 1 clientWidth and clientHeight are defined in the CSSOM View spec On the documentElement is gives the viewport dimensions minus any scrollbars. – Alohci Commented Dec 6, 2019 at 18:55
• 1 window.innerWidth and innerHeight are also defined there. They give the viewport dimensions including any scrollbars. – Alohci Commented Dec 6, 2019 at 19:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 this help?

document.documentElement.clientWidth
document.documentElement.clientHeight

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

本文标签：