Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS return bad value for window.innerHeight/Width

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.

like image 634
ohmer Avatar asked Jan 07 '11 20:01

ohmer


3 Answers

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.

like image 133
Jacquen Avatar answered Sep 24 '22 15:09

Jacquen


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

<script>
  if (screen.width > 650) {
    ....
  }
</script>
like image 40
Senya Avatar answered Sep 22 '22 15:09

Senya


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;
like image 8
Sergei Panfilov Avatar answered Sep 22 '22 15:09

Sergei Panfilov