iOS return bad value for window.innerHeight/Width

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.

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

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

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;