移动Safari不会缩放方向更改？

Question

我正在开发一个Web应用程序，我希望它可以填充浏览器的整个可视区域，而不需要滚动。我用视口标签完成了这个：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

除了Mobile Safari之外，这似乎对每个浏览器都有预期的效果。在Safari上，我有两个问题：

1. 页面底部在纵向模式下悬挂在窗口底部约60px处，在横向模式下约120px。我认为这是因为Safari的地址栏被视为其可视区域的一部分，但你可以验证这一点，我如何绕过它而不影响其他浏览器？
2. 方向更改后，页面内容无法正确调整大小。我在页面的右侧给了一个大排水沟。

如果它有任何区别，我正在使用jQuery Mobile，这是一个page对象，左侧有panel。 Chrome for Android或Browser.apk中不存在这些错误。

编辑：页面位于http://bit.ly/19LoH8m。

感谢。 斯科特

Answer 1

首先尝试更新这些内容，让我们看看。

而不是

$("#mapViewer").outerHeight($(window).innerHeight());

使用

$("#mapViewer").outerHeight($(window).height());

参见JQ doc，http://api.jquery.com/innerHeight/

JQM还有方向改变事件， 而不是

$(window).resize(function() {
    /* some calculation */
});

使用

$( window ).on( "orientationchange", function( event ) {
    /* some calculation */  
}); 

Answer 2

通过从视口中删除width和height属性来解决问题。它现在可以在Mobile Safari，Chrome（适用于iOS，桌面和Android）和IE10上正确呈现。