h5bp/mobile-boilerplate — Issue #103: Better fix to iOS zoom bug on orientation change
Author: sergiolopes
Created: 2012-02-28 09:12:23+00:00
State: open

I was exploring MBP the options to address the famous iOS zoom bug when you change your device to landscape when I started thinking about a different solution.

Currently, MBP suggests using the viewport `width=device-width` which fixes the bug. But we know the device viewport is stuck in 320px even if you rotate your device. If the user wants to solve this by setting `initial-scale=1`, MBP suggests an script based on @shichuan solution that fixes the bug but have several issues (if the user zooms, the script doesn't work anymore; the zooming only happens in the second gesture, ...).

I think I got a better solution that allows user zooming all the time (never disabling it), allows different viewport sizes for both portrait and landscape and doesn't seem to have any UX issues. I used a trick with CSS scale transformations to properly scale the page.

I created a small project here to showcase my solution:

https://github.com/sergiolopes/ios-zoom-bug-fix

There's a demo and the code has many comments. I did some real world demos too, applying the hack to famous mobile sites to see if it works in the wild (and apparently, it does :).

What do you think?