Time to remove the shrink-to-fit=no band aid?
Back in 2015, iOS 9 was released and with it Apple changed how Safari handled the initial viewport zoom on page load.
If you are unfamiliar with the change, Ire Aderinokun wrote all about it. But to summarize:
- Apple changed something, as they are ought to do.
- People were dismayed because websites didn’t render as expected (content that would have overflowed horizontally instead caused the screen to shrink).
- People realized they could fix this issue by adding
shrink-to-fit=no
to their viewport meta tag. Applause. - Frameworks, boilerplates and such all adopted this fix and everyone moved on with their lives.
A few years and many updates to iOS later, we continue to include the shrinking fix to our viewport meta tags. However, it seems the scrape has healed and we may not need to keep wearing this band aid.
Proof is in the testing
Using a range of iOS devices and simulations, I’ve been able to confirm that the need for shrink-to-fit
became irrelevant during the iOS 9 life cycle.
Creating reduced test cases of a document without shrink-to-fit=no
and with shrink-to-fit=no
, I then tested these with the following devices:
- iPhone 6 - 9.0 (simulated)
- iPhone 9 - 9.2 (simulated)
- iPad - 9.3.2
- iPod Touch - 9.3.5
- iPhone 6 - 11.0
- iPhone 7 - 10.3 (simulated)
- iPhone XR - 12.1
Quick summary: Apple eventually noticed the kerfuffle they caused and got around to rectifying the issue post iOS 9.2.
Slightly more details:
The 9.0 and 9.2 simulations produced the original issue, necessitating the need for shrink-to-fit
to rectify Safari automatically shrinking the contents of the screen to fit within the viewport.
Testing revealed that from iOS 9.3.2 forward, the need for shrink-to-fit=no
became irrelevant. Apparently, somewhere between 9.2.1 and 9.3.2 (likely 9.3 as Safari 9.1 was bundled with this release), Apple reverted zooming to work as it had prior to iOS 9.0. No applause ensued because Apple didn’t really make much (any) of a fuss about the fix.
If initial zoom was corrected with the release of iOS 9.3, then that means the necessity for shrink-to-fit
has only declined since March of 2016.
So what to do?
Taking a quick peak at iOS market share worldwide, in the last year of data apparently 89.72% of people are/were using iOS 9.3 and up. That’s a pretty good number, especially since the versions of iOS where shrink-to-fit=no
is needed, is a percentage of that percentage.
However, before you go make any changes, you should do an operating system check of your analytics. If you still have quite a bit of traffic coming in with these “shrinking” versions of iOS, then maybe it makes sense to keep shrink-to-fit=no
. It’s definitely not hurting anything.
But, if you’re analytics show that these versions of iOS are nowhere to be found, or their numbers are only indicative of your test devices hitting your website (also good job testing that far back), then it’s probably safe to remove.
At least… until Apple decides to change things again. But we’ll likely need another addition to our meta tag for whatever that change is anyway.
Updated January 8, 2019
Since posting the results of my testing, and using the results as references for pull requests, HTML5 Boilerplate and Josh Buchea’s HEAD repository have accepted the removal of shrink-to-fit=no
from their recommended viewport meta tags.