Skip to content

Instantly share code, notes, and snippets.

@baptistebriel
Forked from Linrstudio/hello-apple.md
Created October 23, 2020 17:12
Show Gist options
  • Save baptistebriel/4f4a3997efa189102ec699e145d0c9db to your computer and use it in GitHub Desktop.
Save baptistebriel/4f4a3997efa189102ec699e145d0c9db to your computer and use it in GitHub Desktop.
solutions for window.innerWidth / innerHeight issue in iOS9

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

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