Detection not future-proof

[colinaut]

You should likely test for screen size and base your css for -webkit-transform, width, and height on that test rather than just use static sizes for iphone vs ipad. Otherwise this script will break if Apple ever changes their aspect ratios—which could happen as soon as this fall if the rumors are true about the 4" iPhone.

p.s. any reason you don't include the "initial-scale: 1.0" in your viewport meta? I would think this would mess with rendering on Android and other devices without it.

p.p.s. brilliant thinking outside the box hack btw. All the other solutions are buggy and rely on ugly event listeners.

[sergiolopes]

In my view, by definition, all hacks aren't future-proof. I'm testing for specific devices hoping that, one day, Apple will fix this bug (and since this is a famous annoying bug, I think it can happen sometime).

But I agree with you that, when a new iPhone comes out, we will have to test everything again and update the script. I just don't know if it's a good idea to make any hack future-proof -- we can break future devices.

p.s. No particular reason. I'm just using the viewport value most people use when they don't want to disable zooming. It works fine for me both on Android an iOS.

p.p.s Thanks. It's a different idea, has it's own caveats, but seems more bullet proof than those weak JS listeners.

[colinaut]

Forked your code and got it working using screen.width and screen.height rather than the iPad/iPhone variable defaults. This solves the potential screen ratio issue that I mentioned. Also I successfully tested changing the transform to the body element which removes the need for a dedicated container element. You can see my results here:

demo page: http://catcubed.github.com/ios-zoom-bug-fix/ git: https://github.com/catcubed/ios-zoom-bug-fix