从纵向旋转到横向时，iPad 布局会放大

我有一个添加到"viewport"元标签"width=device-width,initial-scale=1.0"在 iPad 上，页面在横向模式下加载得很好，它可以很好地切换到纵向模式，当我将其旋转回横向模式时，它会放大页面，我必须将其缩放回 1 比例。

我可以通过添加来解决这个问题"maximum-scale=1.0, user-scalable=no"，但我想知道是否有一种方法可以解决这个问题，而不剥夺用户放大页面的能力。

如果您有任何建议，我很想听听，
Thanks!

- - - 更新 - - -

在 iOS7 中这不再是问题。 Scott Jehl 在 github 上有更好的修复scottjehl/iOS-Orientationchange-Fix https://github.com/scottjehl/iOS-Orientationchange-Fix适用于 iOS6。

------原答案------

杰里米·基思（@adactio http://twitter.com/adactio）在他的博客上对此有一个很好的解决方案方向和规模 http://adactio.com/journal/4470/

保持标记可扩展

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

然后使用 javascript 禁用可扩展性，直到手势启动用这个脚本：

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}