方向改变后ios phonegap"黑条"

Question

ios(ipad 3或iphone 5)phonegap(目前最新的3.4.0)应用程序,带有非常简单的html和内联css:http://pastebin.com/raw.php？i = fmq87E2U

问题是,如果我处于横向,更改为纵向,取消缩放,然后更改回横向,则屏幕右侧会出现黑色竖条,直到我执行任何捏合/缩放.

截图:

1. 在景观上启动应用
2. 旋转到肖像
3. 捏放大还原
4. 旋转回景观(右侧拍摄的"黑色区域"问题)

无论我通过CSS做什么,当黑条出现时,没有什么可以改变这种情况(我甚至尝试过webkit旋转,缩放,但都会影响页面的可见部分).我也试过window.resizeTo触发浏览器"重画"或者什么但没有运气.

关于如何解决这个问题的任何想法？

此错误无法复制为ipad或iphone safari上的网页.在方向改变时,屏幕正确适应.

Answer 1

另一种解决方案是简单地在方向改变时重新加载页面。PhoneGap 浏览器会适应缩放。

var originalPageLoadOrientation = window.orientation;
$(window).on("orientationchange", function() {
    // just to avoid initial orientationchange which is called on page load
    if (originalPageLoadOrientation==window.orientation) return;
    location.reload();
});

当然，这可能会对应用程序产生其他影响。（例如，如果应用程序是一个复杂的单页面应用程序，重新加载整个页面会重新启动所有内容）。

编辑：而不是location.reload();更好的方法是这样做location.href = location.href;。后者似乎避免了显示屏的可见闪烁。