How to calculate height of viewable area (i.e., wi

问题:

What is the right way to calculate how much viewable space is available on mobile Safari? By viewing area, we mean the amount of the screen actually available to a web app, that is the window height minus the address and bookmark bars.

iOS 7 prevents hiding of the address bar, and we need to properly account for the viewport height.

回答1:

window.innerWidth and window.innerHeight will give the width and height of the viewport.

回答2:

I know this is 5 years old post, but this problem still persists as i can tell. My workaround: Use a HTML Element on the page which is styled with CSS: .el{ height:100vh; } and retrieve the height in pixel to Javascript by using jQuery: $('.el').height();

If you don't have a practical use for such a element you might create one on the fly for the sole purpose of masuring the viewport:

var vh = $('<div style="height:100vh"></div>"').appendTo('body').height();
$('body div:last-child').remove();