My approach to fix the iOS bug is documented here:
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.