Incorrect iPhone Height (jQuery)?

Question

I set the viewport tag to 480 pixels, so on the iPhone (portrait mode) the true dimensions of the website are:

• 480x534px when the top bar is displayed.
• 480x594px when the top panel is hidden

However, jQuery(window).height() and window.innerHeight and jQuery(window).InnerHeight() ALWAYS return 480x534px, and this creates a 60px gap at the bottom of the website when trying to place the container height: 100%; width: 100%; height: 100%; width: 100%; on top of the current content (popup).

This is reported as a jQuery error already (and an iPhone error), but is there a workaround?

Answer 1

when the page loads on iPhone, the top bar appears.
therefore $(window).height() will return the actual size of the smaller window.
some time after the top panel moves up to resize the window.
therefore, you can add a constant to (window).height() , which represents the size of the top bar, or hook into the $(window).resize() event to get the actual size after the top panel disappears.

Answer 2

Be sure to use external height instead of internal height. Unfortunately, jQuery $(window).outerHeight() not applicable to the window (it returns the same as $(window).height() ) and document , so you need to do this in plain JavaScript, as follows:

 (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height()