jquery - 移动 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 上，我有两个问题：

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

如果有什么不同，我使用的是 jQuery Mobile，这是一个左侧page有 a 的对象。panelChrome for Android 或 Browser.apk 中不存在这些错误。

编辑：页面可以在http://bit.ly/19LoH8m找到。

谢谢。斯科特

score 0 · Accepted Answer

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

代替

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

利用

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

而且JQM中也有方向改变事件，而不是

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

利用

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

score 0 · Accepted Answer

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

2 回答 2