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

Answer 1

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

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

Answer 2

Same issue still. I have a full screen app, no need for user to scale anything (it's a kiosk), and solution for me was adding the shrink-to-fit=no meta.

My current meta for the viewport is:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" />

Now window.innerWidth, jQuery(window).width() and everything else related works properly. Before that, I had to rotate iPad and return it back to original position for window size values to refresh to the proper ones.

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;

Answer 4

Check Apple's documentation on how to set the viewport for Mobile Safari, and how it scales: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html

Basically, you can set a scale for the viewport, and make it default to whatever you want by setting a meta tag on your HTML page.

Answer 5

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 6

iOS latest version does not support window.innerHeight and window.innerWidth, because iOS will read the resolution.

So, you can use this :

screen.width
screen.height

I have try it in appetize.io emulator iPhone.