How to calculate height of viewable area (i.e., window height minus address & bookmark bars) in mobile Safari for web app?

Question

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.

Solution 1

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

Solution 2

For anyone who comes in 2020, window.screen.availHeight is the only one that works as @Marcel Falliere's comment below.

Solution 3

Set the CSS height of your root container element (let's call it rootElement) to the height of the view port:

.root-element {
  height: 100vh;
}

Then, when the page did render, run this code to update rootElement height to the view port height minus the size of the browser UI bars (for example, on iOS Safari: top address bar, bottom navigation bar…):

const rootElement = document.querySelector(".root-element")
const viewPortH = rootElement.getBoundingClientRect().height;
const windowH = window.innerHeight;
const browserUiBarsH = viewPortH - windowH;
rootElement.style.height = `calc(100vh - ${browserUiBarsH}px)`;

This solution sets the size of your root container to what is available, but it also keep the possibility for the browser to adapt rootElement height when the window is resized (when used on a desktop, for instance).

Solution 4

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();

View more solutions

Comments

[Crashalot]

this doesn't seem to work on iOS 7; window.innerHeight doesn't yield the height after subtracting for the address and bookmark bars. do we need to do something else?

[neilco]

On my iPhone 4S running iOS 7.0.2, window.screen.availHeight gives 460. That is 480px minus the height of the status bar. With both the address bar and tab bar visible, window.innerHeight is 373. If I then scroll to minimise the address bar and hide the tab bar, window.innerHeight reports 441.

[Crashalot]

Hmm, what value do you get when you visit this page: tekiki.com/default/test? We get 1109. The code for the entire page is this: <script type='text/javascript'> setTimeout( function() { alert( window.innerHeight ); }, 500 ); </script>

[neilco]

Add this to the head element: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> and you'll get 372.

[Marcel Falliere]

window.screen.availHeight returns 548 on iphone5S/ios7.0.3 with or without the toolbar and big/small adress bar ; window.innerHeight returns 529 initialy and 460 after scrolling.

[episodeyang]

This does not work, because the Layout event on the mobile safari fires with the initial dimension that is different from the logical pixels. If the script runs before the style computation, this innerHeight/Width would be wrong. currently there is no event hook to trigger on, and a simple setTimeout is the only solution available as far as I know.

[Ayyash]

Timeout still gives me the wrong value for innerHeight

[Luu Hoang Bac]

@MarcelFalliere 2020, you should write it as an independent answer, because it's the only one works

[Giorgos Xou]

Works on Android Chrome, version-87.0428066 too, Tested. Tip: use the value as a css variable