问题
I am trying to determine the actual viewPORT size of the current browser window. I've tried:
- window.innerHeight/innerWidth
- document.documentElement.clientHeight/clientWidth
- document.body.clientHeight/clientWidth
All return the full page size and NOT the viewing area.
What I'm trying to ultimately achieve is forcing a popup menu to appear on screen (in the viewport). Right now when it is shown, it might show below the scroll and the users are not happy with that. I know the x,y of where they've clicked. I just need to compare that to the size of the viewing area (with the size of the popup) to see if it will go offscreen.
It should be noted that the page is showing in an IFRAME, so if I need to go up one level to get the correct value, I can do that.
回答1:
- window.innerHeight/innerWidth
That unequivocally does give you viewport size (in this case, the size inside your iframe), but it isn't available on IE.
- document.documentElement.clientHeight/clientWidth
That gives you viewport size, when the browser is in Standards mode. Typically used as fallback for IE.
- document.body.clientHeight/clientWidth
That gives you viewport height in Quirks mode. You don't want to be in Quirks mode. Check the <!DOCTYPE of your document.
I just need to compare that to the size of the viewing area
Then you'll also have to look at the document.documentElement.scrollTop/scrollLeft.
回答2:
Try
document.getElementById("").offsetWidth
Fill the above code with different element ID's, try using the body tag, or a wrapper div.
回答3:
Apparently by going to the parent document, I was able to get the correct value.
Thanks!
来源：https://stackoverflow.com/questions/3111298/determine-actual-viewing-size-in-browser