jQuery/JS, iOS 4 and $(document).height() problems
Asked Answered
A

5

13

I've run into an odd issue with what appears to be various versions of Webkit browsers. I'm trying to position an element on the center of the screen and to do the calculations, I need to get various dimensions, specifically the height of the body and the height of the screen. In jQuery I've been using:

var bodyHeight = $('body').height();
var screenHeight = $(window).height();

My page is typically much taller than the actual viewport, so when I 'alert' those variables, bodyHeight should end up being large, while screenHeight should remain constant (height of the browser viewport).

This is true in - Firefox - Chrome 15 (whoa! When did Chrome get to version 15?) - Safari on iOS5

This is NOT working in: - Safari on iOS4 - Safari 5.0.4

On the latter two, $(window).height(); always returns the same value as $('body').height()

Thinking it was perhaps a jQuery issue, I swapped out the window height for window.outerHeight but that, too, does the same thing, making me think this is actually some sort of webkit problem.

Has anyone ran into this and know of a way around this issue?

To complicate things, I can't seem to replicate this in isolation. For instance: http://jsbin.com/omogap/3 works fine.

I've determined it's not a CSS issue, so perhaps there's other JS wreaking havoc on this particular browser I need to find.

Armorial answered 20/11, 2011 at 23:53 Comment(5)
have you tried $(document).height() ?Punchdrunk
@gaby that produces a value slightly higher than $('body').height()Armorial
hmm.. must be the paddings ... look at james.padolsey.com/javascript/get-document-height-cross-browser as well... (just in case)Punchdrunk
@gaby but I don't need the document height. I need the height of the viewport.Armorial
@gaby...aha! That link does have something useful, though. It's using document.documentElement.clientHeight and that seems to accurately grab the viewport. Investigating some more...Armorial
M
33

I've been fighting with this for a very long time (because of bug of my plugin) and I've found the way how to get proper height of window in Mobile Safari.

It works correctly no matter what zoom level is without subtracting height of screen with predefined height of status bars (which might change in future). And it works with iOS6 fullscreen mode.

Some tests (on iPhone with screen size 320x480, in landscape mode):

// Returns height of the screen including all toolbars
// Requires detection of orientation. (320px for our test)
window.orientation === 0 ? screen.height : screen.width


// Returns height of the visible area
// It decreases if you zoom in
window.innerHeight


// Returns height of screen minus all toolbars
// The problem is that it always subtracts it with height of the browser bar, no matter if it present or not
// In fullscreen mode it always returns 320px. 
// Doesn't change when zoom level is changed.
document.documentElement.clientHeight 

iOS window height

Here is how height is detected:

var getIOSWindowHeight = function() {
    // Get zoom level of mobile Safari
    // Note, that such zoom detection might not work correctly in other browsers
    // We use width, instead of height, because there are no vertical toolbars :)
    var zoomLevel = document.documentElement.clientWidth / window.innerWidth;

    // window.innerHeight returns height of the visible area. 
    // We multiply it by zoom and get out real height.
    return window.innerHeight * zoomLevel;
};

// You can also get height of the toolbars that are currently displayed
var getHeightOfIOSToolbars = function() {
    var tH = (window.orientation === 0 ? screen.height : screen.width) -  getIOSWindowHeight();
    return tH > 1 ? tH : 0;
};

Such technique has only one con: it's not pixel perfect when page is zoomed in (because window.innerHeight always returns rounded value). It also returns incorrect value when you zoom in near top bar.

One year passed since you asked this question, but anyway hope this helps! :)

Messinger answered 30/3, 2013 at 10:42 Comment(0)
M
3

I had a similar problem. It had to do with 2 thing:

Box-sizing CSS3 property: In the .height() jQuery documentation I found this:

Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "height" ) rather than .height().

This may apply to $('body').height().

Document ready vs Window.load

$(document).ready() is run when the DOM is ready for JS but it's possible that images haven't finished loading yet. Using $(window).load() fixed my problem. Read more.

I hope this helps.

Mojgan answered 25/9, 2013 at 18:23 Comment(1)
You definitely helped, saved me a few hours at least.Glittery
V
3

It is 2015, we are at iOS 8 now. iOS 9 is already around the corner. And the issue is still with us. Sigh.

I have implemented a cross-browser solution for the window size in jQuery.documentSize. It stays clear of any kind of browser sniffing and has been heavily unit-tested. Here's how it works:

  • Call $.windowHeight() for the height of the visual viewport. That is the height of the area you actually see in the viewport at the current zoom level, in CSS pixels.
  • Call $.windowHeight( { viewport: "layout" } ) for the height of the layout viewport. That is the height which the visible area would have at 1:1 zoom - the "original window height".

Just pick the appropriate viewport for your task, and you are done.

Behind the scenes, the calculation roughly follows the procedure outlined in the answer by @DmitrySemenov. I have written about the steps involved elsewhere on SO. Check it out if you are interested, or have a look at the source code.

Vintner answered 5/8, 2015 at 17:4 Comment(2)
Your library works great, thanks! Btw, $.windowHeight( { viewport: "layout" } ) is what fixed the iphone problems for me.Rabble
@Rabble Thanks for the feedback.Vintner
P
0

Try this :

var screenHeight = (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height()
Pustule answered 18/7, 2014 at 10:39 Comment(0)
R
-2

A cross browser solution is set that by jQuery

Use this property: $(window).height()

This return a int value that represents the size of visible screen height of browser in pixels.

Rakehell answered 20/1, 2014 at 18:31 Comment(3)
as you'll note in the question, however, that's not the case...at least that wasn't the case when I wrote the question. Maybe it's been better handled in newer versions of jQuery. I should go back and retest.Armorial
Still seems to be off - may 2014 - and its a 'wontfix' at jquery. bugs.jquery.com/ticket/6724Collywobbles
The point is that there is a bug in jQuery such that $(window).height() doesn't work in iOS.Alemanni

© 2022 - 2024 — McMap. All rights reserved.