iOS return bad value for window.innerHeight/Width

Question

I'm using window.innerHeight and window.innerWidth instructions to get the browser's available window size. It's working with firefox, safari (on a mac) and android but I get strange results in iOS.

iOS always returns innerHeight=1091 and innerWidth=980.

I'm using iOS emulator from the iOS SDK (I don't own an iPhone/iPod). The same value is returned with the iPhone and iPhone Retina emulator. I don't understand how they can both returns the same numbers because the 2 models have 2 different screens resolutions.

I played with the viewport parameter with no success.

Answer 1

TL;DR: Use document.documentElement.clientHeight/Width

This is not exactly an answer to the question, but it's helpful information if you're trying to do things based on the size of the document shown in the browser.

window.innerWidth (and height) can get wacky on mobile browsers, even when you use the proper viewport meta tags. On some browsers it can be very inconsistent.

screen.width works better for mobile browsers, but then you need to take into account orientation and whether or not the browser is mobile or desktop (if you need to be responsive for both), as screen.width gives much more variation on desktop compared to window.innerWidth.

In my experience, document.documentElement.clientWidth is the best way to go. Mobile browsers are much more consistent for this attribute than for window.innerWidth, and since you're dealing with the dimensions of the html element and not the browser window or the device screen, it's consistent between mobile and desktop, and orientation does not need to be accounted for.

Answer 2

Try to use screen.width instead of window.innerWidth.

<script>
  if (screen.width > 650) {
    ....
  }
</script>

Answer 3

Was stuck on the same issue. Here's the solution that worked for me.

First I'm detecting if the client is an iOS device. Then i'm getting correct values using Screen interface

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; 
var iw = (iOS) ? screen.width : window.innerWidth, ih = (iOS) ? screen.height : window.innerHeight;