Skip to content

Instantly share code, notes, and snippets.

@cooljl31

cooljl31/hello-apple.md

Forked from Linrstudio/hello-apple.md
Created July 30, 2020 17:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cooljl31/22f42a6629b07b6523605a71711fcc26 to your computer and use it in GitHub Desktop.
Save cooljl31/22f42a6629b07b6523605a71711fcc26 to your computer and use it in GitHub Desktop.
Download ZIP
solutions for window.innerWidth / innerHeight issue in iOS9
Raw
hello-apple.md

iOS9 returns double the value for window.innerWidth & window.innerHeight
The versions that are concerned are: 9.0.0, 9.0.1, 9.0.2

A few people got mad on twitter:

window.innerWidth in iOS 9 Safari returns double the number it did in iOS 8? Is this real life? tell me no — @rachsmithtweets
iOS9 Safari has the most insane bug where window.innerWidth / innerHeight is *sometimes* twice as large as it should be. ughhhh. !? — @mattdesl
iOS9 innerWidth/innerHeight is having a lot of fun these days — @ayamflow
Raw
workarounds.md

1) Use shrink-to-fit meta-tag

We don't have much infos about this new meta-tag, but it fix the 'scale of 1' issue for content larger than the viewport. See this tweet for more details:

@awfulben @kmuncie @hortont424 shrink-to-fit=no — @smfr

An appropriate example would look like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, shrink-to-fit=no">
In my case, it did fixed the window.innerHeight/Width issue. (tested on 9.0.2)

2) Use clientWidth/Height

Instead of using window.innerHeight/Width, use document.documentElement.clientHeight/Width
Since a lot of modules/librairies use it, it's not a very good solution.

More infos could be found here, and here.
If you have any suggestions, feel free to comment!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment