1
window.innerHeight

Yes, it will return the value of the browser's height on a mobile device. However, the problem comes (on some browsers) when a user tries to pinch to zoom in or zoom out. The value will not adjust properly and instead still return the full length of the page.

Let's say it was 500px when loaded. The user then zooms in and the height is now 200px. However, the value is still returning 500px.

Does anyone know a method to fix this? Been searching forever.

Chris
  • 579
  • 1
  • 6
  • 14

3 Answers3

1

The way I fixed this was to remove any resize callback in my code. Sounds weird, but it worked for me.

Dylan
  • 495
  • 1
  • 6
  • 19
  • This would mean that the innerHeight does give the correct value and there is something in my code that is causing a problem. I haven't tested this but I don't believe it to be the case. In the android browser and Firefox mobile, the innerheight is not returning a zoomed in height. Opera mobile is working correctly, though. – Chris Mar 23 '12 at 01:57
0

This worked for me. The first thing I do is grab window.innerHeight and window.innerWidth from the dom when the page loads so I get the original values and store them in javascript variables. Then in my window.onresize event handler I do this.

var height = null;
var width = null;

if (window.orientation && window.orientation == -90) {
  height = myOriginalHeight;
  width = myOriginalWidth;
}
else {
  height = myOriginalWidth;
  width = myOriginalHeight;
}
doCallbacks(width, height);

My app resizes a lot because I attempt to write one ui for all screen types. According to my testing with the app this works on ipad and andriod and all the resizing works when zoomed in or orientation changes which can sometimes cause zoom to occur.

The interesting aspect of this is mobile browsers never actually change screen sizes as they are fixed, they just zoom. But if you resize to original width/height and handle orientation this way it seems to work.

Damien
  • 1
0

Check out the accepted answer in this link: Detect page zoom change with jQuery in Safari

If your want innerHeight, may be get original width and then zoomed width, get zoom ratio and then calculate the new Height (after zoom).

Community
  • 1
  • 1
Varun Goel
  • 339
  • 3
  • 15
  • This might work in Safari, but not in Android Browser and FireFox Mobile. Although, this would certainly be a solution if I could detect the zoom cross-browser mobile. – Chris Mar 24 '12 at 13:00
  • Have you checked - ** document.documentElement.clientWidth **? When you zoom, innerHeight adjusts but clientWidth/clientHeight doesnt. – Varun Goel Mar 26 '12 at 01:48