4

I set viewport tag to 480px so in iPhone (portrait mode) true dimensions of website are:

  1. 480x534px when top bar is visible
  2. 480x594px when top bar is hidden

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

This is reported as jQuery bug already (and iPhone bug) but is there any workaround?

Atadj
  • 7,050
  • 19
  • 69
  • 94
  • Check my answer to similar question, might help a little http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems – Dmitry Semenov Mar 30 '13 at 11:33
  • @DmitrySemenov Thanks! I've found a way to do this an year ago and I reported this as bug to jQuery. They said this should be fixed in jQuery 1.8 (and we have jQuery 1.9 now so perhaps it's fixed). After iOS upgrades (recent 6.0) there are major changes as well so I bet we have to keep an eye on things like that on a regular basis and update scripts/libraries/plugins :) – Atadj Mar 31 '13 at 14:22

2 Answers2

1

when a page loads on the iPhone the top bar appears.
that is why $(window).height() will return the actual size of the smaller window.
a while after the top bar slides up so the window size change.
so you can add a constant to the (window).height() that represents the top bar size or hook up to $(window).resize() event to retrieve the actual size after the top panel disappear.

Sagiv Ofek
  • 25,190
  • 8
  • 60
  • 55
  • 1
    I retrieve height before and after this with the same (wrong) value: window.addEventListener("load",function() { window.scrollTo(0, 1); }); – Atadj May 12 '12 at 08:04
1

Be sure to use the outer height instead of the inner height. Unfortunately, jQuery's $(window).outerHeight() is not applicable to the window (it returns the same as $(window).height()) and document element so you have to do it in plain JavaScript, as follow:

(typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height()
NicolasBernier
  • 1,586
  • 14
  • 15