Skip to content

Instantly share code, notes, and snippets.

@asha23
Forked from sergiolopes/README.md
Created July 28, 2014 16:55
Show Gist options
  • Save asha23/2c330713ee7faa3b2397 to your computer and use it in GitHub Desktop.
Save asha23/2c330713ee7faa3b2397 to your computer and use it in GitHub Desktop.

My approach to fix the iOS bug is documented here:

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

Here I present one experiment with a pure CSS solution, no JS required. It uses width=device-width normally (no device-height hacking) and scales down the page on landscape.

Works fine on all iOS versions.

There's only one problem: on old iOS versions (prior to 4.3.5), the page will get a big empty space at bottom, below the content, when on landscape. Recent iOS versions don't show this behavior.

If you have a solution to this problem on old MobileSafari, please let me know.

/* iPhone */
@media only screen and (width:320px) and (device-width:320px) and (device-height:480px) and (orientation: landscape) {
body {
-webkit-transform: scale(0.667);
-webkit-transform-origin: top right;
position: absolute;
right: 0;
top: 0;
width: 480px;
}
}
/* iPad */
@media only screen and (width:768px) and (device-width:768px) and (device-height:1024px) and (orientation: landscape) {
body {
-webkit-transform: scale(0.75);
-webkit-transform-origin: top right;
position: absolute;
right: 0;
top: 0;
width: 1024px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment