Ipad: window.height() give bad value in Safari but not in Chrome

Question

I have to get the window's height on Ipad to display something in the full height.

I have done this example page: http://daviddarx.com/stuffs/work/biceps/ipad/

Here is my js code, very simple, that only write the window.height() in the body:

generalResizeListener=function(){
    screenW=$(window).width();
    screenH=$(window).height();
    $("body").html(screenH)
    console.log(screenH);
}
$(window).resize(generalResizeListener);

There is two problem, on my ipad2 with IOS7: -In safari, but not in Chrome, the displayed value don't fit to the actual page height (I checked on screenshots)

-In Safari always, even if there isn't anything in the page, the page's height is bigger than the viewport and I can scroll down for something like 10-20px. That is the biggest probleme.

Do you know why is this happening? I haven't any css files in my demo page, so I really don't understand.

Thank you in advance for your help! David

---

@Gal V:

I already implemented this "hacky solution". Thank you for your answer, anyway! I looked a bit more in google and it seems to be a specific bug of safari IOS7:

- https://discussions.apple.com/message/23150650#23150650

- Scrolling problems on a web page with fixed header and footer in iOS7

- iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue

Answer 1

Safari browser on iOS has a bottom bar (unlike chrome) that is being calculated inside the window height while it isn't really part of the window/page.

you need to detect cases (with user-agent) where the client uses Safari browser on iOS device, and then you need to set the height of the body (with javascript) to $(window).height() - bar_height , and it should solve your problem.

hope that helps.

Answer 2

I used this JavaScript solution for solving that problem:

    if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight) {
  var fixViewportHeight = function() {
    document.documentElement.style.height = window.innerHeight + "px";
    if (document.body.scrollTop !== 0) {
      window.scrollTo(0, 0);
    }
  }.bind(this);

  window.addEventListener("scroll", fixViewportHeight, false);
  window.addEventListener("orientationchange", fixViewportHeight, false);
  fixViewportHeight();

  document.body.style.webkitTransform = "translate3d(0,0,0)";
}

Answer 3

My solution is this...

Insert this on your page:

<div id="win-height" style="position: fixed;left: 0; top: 0; bottom:0; width: 0; z-index: "></div>

instead of,

$(window).height()

to get the window height, use,

$('#win-height').height()

Goodluck!