Mobile - iOS - Safari - window.outerHeight returns 0

Question

I am having an issue with window.outerHeight.

It returns 0 when run on the Safari browser on mobile. I have tested it on Android (Chrome) and it works fine.

I am on iOS9.

I want to know if there is a solution or an alternative that is supported on older devices.

It is not a timing issue.

Open the following on your iPhone: http://jsfiddle.net/hfq0Ly1w/

alert(window.outerHeight);

You can see there are a lot of bugs on Safari by checking the height properties on your phone here:

http://ryanve.com/lab/dimensions/

Cheers!

Answer 1

Safari sets/ reads the height value differently. If you use the following you will be fine:

window.innerHeight

The above does the right calculation even if it appears wrong. It also adjusts the height if the browser tool bar appears on scroll.

You can see this happening on the link I provided:

http://ryanve.com/lab/dimensions/

Android won't take the toolbar into consideration. There is no way of working out the toolbar height dynamically with JS.

Cheers.