Mobile Safari $(window).height() URL bar discrepancy

by

Tldr

If you just want to query the window height, cross-browser, and be done with it, use jQuery.documentSize and call $.windowHeight(). For implementing your own solution, read on.

When to use jQuery or the clientHeight of the document

jQuery’s $(window).height() is a wrapper for document.documentElement.clientHeight. It gives you the height of the viewport, excluding the space covered by browser scroll bars. Generally, it works fine and enjoys near-universal browser support. But there are quirks on mobile, and in iOS in particular.

  • In iOS, the return value pretends that the URL and tab bars are visible, even if they are not. They get hidden as soon as the user scrolls and the browser switches to minimal UI. Window height is increased by roughly 60px in the process, and that is not reflected in the clientHeight (or in jQuery).

  • The clientHeight returns the size of the layout viewport, not the visual viewport, and therefore does not reflect the zoom state.

So… not quite so great on mobile.

When to use window.innerHeight

There is another property you can query: window.innerHeight. It

  • returns the window height,
  • is based on the visual viewport, ie reflects the zoom state,
  • is updated when the browser enters minimal UI (mobile Safari),
  • but it includes the area covered by scroll bars.

The last point means that you can’t just drop it in as a replacement. Also, it is not supported in IE8, and broken in Firefox prior to FF25 (October 2013).

But it can be used as a replacement on mobile because mobile browsers present scroll bars as a temporary overlay which does not consume space in the viewport – window.innerHeight and d.dE.clientHeight return the same value in that regard.

Cross-browser solution

So a cross-browser solution, for finding out the real window height, works like this (pseudo code):

IF the size of browser scroll bars is 0 (overlay)
  RETURN window.innerHeight
ELSE
  RETURN document.documentElement.clientHeight

The catch here is how to determine the size (width) of the scroll bars for a given browser. You need to run a test for it. It’s not particularly difficult – have a look at my implementation here or the original one by Ben Alman if you wish.

If you don’t want to roll your own, you can also use a component of mine – jQuery.documentSize – and be done with a $.windowHeight() call.

More Related Contents:

  1. jQuery get the rendered height of an element?
  2. jQuery .load() call doesn’t execute JavaScript in loaded HTML file
  3. jQuery.ajax() method’s async option deprecated, what now?
  4. onClick not working on mobile (touch)
  5. jQuery click event not working in mobile browsers
  6. Dynamically adding collapsible elements
  7. Get height of div with no height set in css
  8. Setting equal heights for div’s with jQuery
  9. Distinguish Chrome from Safari using jQuery.browser
  10. Mobile site – force landscape only / no auto-rotate
  11. How do I get the height of a div’s full content with jQuery?
  12. How to change height div on window resize?
  13. JQuery Hide Option doesn’t work in IE and Safari
  14. Disable scrolling when changing focus form elements ipad web app
  15. jquery get height of iframe content when loaded
  16. Maintain PHP Session in web app on iPhone
  17. How do I get the real .height() of a overflow: hidden or overflow: scroll div?
  18. iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?
  19. Selecting text on focus using jQuery not working in Safari and Chrome
  20. jQuery web page height
  21. Jquery trigger click not working on safari browsers in mac, Ipad & Iphone
  22. How to change the bootstrap css width into 1000px? [closed]
  23. How to fire loadComplete after new row is added in jqgrid?
  24. How do I change selected value of select2 dropdown with JqGrid?
  25. Can jQuery add commas while user typing numbers?
  26. How can I remove script elements before they are being executed?
  27. jQuery Validation plugin won’t validate when in click event handler of
  28. JQuery Animate Background Image on Y-axis
  29. addID in jQuery?
  30. Display 2 weeks in jQuery FullCalendar

Leave a Comment