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 diff开发者_运维技巧erent screens resolutions.

I played with the viewport parameter with no success.

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;

Add

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

to the <head> element. That will fix the innerWidth issue.

The retina has high density pixels - basically 4 hardware pixels to 1 logical pixel. That's why they report the same resolution.

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.

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.

Also specify the height in the viewport meta tag according to this:

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

I had problems with using jQuery $(window).height() on my iPad 2 (5.0.1) since I had missed out specifying the height in the meta tag. After adding it works much better.

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.

I do not know if this is a known bug, but I spent my fair share of trial / error on this one. Apparently it takes a bit to update the window value and next event loop seems to be working correctly.

window.addEventListener('resize', () => {
  console.log(window.innerWidth, window.innerHeight) // values before the resize / orientation change
  setTimeout(() => {
    console.log(window.innerWidth, window.innerHeight) // values after the resize / orientation change
  }, 0)
})