How to disable viewport scaling in iOS 10? You don't.

When the first beta of iOS 10 was released it didn't take long before some web developers discovered that user-scalable=no stopped working on their websites. Soon issues started popping up at Stack Overflow and drama happened. Probably some developers are already working on their JS plugins to fix this and gain some extra stars on Github.

But it shouldn't be a big drama, and frankly, we shouldn't make JS polyfills to fix this. Because it isn't broken. As we can see from the release notes of the first beta of iOS 10, Apple did indeed disable this intentionally.

Content Blockers may stop working after upgrading to iOS 10 beta 1. Workaround: Go to Settings > Safari > Content Blockers and toggle the content blocker switch. Fixed a bug where no progress was shown while downloading large files. You can now close all tabs in Safari at once by long tapping on the Tab View button. To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

And they're right. By default a user on iOS can pinch to zoom on mobile websites, if they can't read something, want to zoom in on an image, you name it. It's the default user behaviour, and it makes sense. Some developers or designers like to prevent people from scaling so their website always looks pretty and like it was designed. Instead, just set an initial viewport scale and be done with it. Don't worry!

<meta name="viewport" content="width=device-width, initial-scale=1">

Luckily, this behaviour is only applying on Safari Mobile. So that means that web apps or apps with embedded web views will still respect user-scalable=no. For now.

It's all good guys, keep calm and have a beer 🍺!