ios phonegap“黑条”在方向改变后答案

【问题标题】：ios phonegap "black bar" after orientation changeios phonegap“黑条”在方向改变后
【发布时间】：2014-07-15 12:27:29
【问题描述】：

ios（ipad 3 或 iphone 5）phonegap（当前最新的 3.4.0）应用程序，带有非常简单的 html 和内联 css：http://pastebin.com/raw.php?i=fmq87E2U

问题是，如果我在横向，更改为纵向，取消缩放，然后改回横向，然后屏幕右侧会出现一个黑色垂直条，直到我进行任何捏合/缩放。

截图：

start app on landscape
rotate to portrait
pinch-unzoom
rotate back to landscape（右侧这张照片中的“黑色区域”问题）

当黑条出现时，无论我通过 CSS 做什么，都无法改变这种情况（我什至尝试过 webkit 旋转、缩放，但都会影响页面的可见部分）。我还尝试了window.resizeTo 以触发浏览器“重绘”或其他东西，但没有运气。

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

此错误无法在 ipad 或 iphone safari 上重现为网页。在方向改变时，屏幕会正确适应。

【问题讨论】：

您的 webView 似乎没有缩放。查看 webView.scalesPageToFit 属性。这是一个 ObjC 修复，而不是 CSS。
自从我使用 phonegap build 构建后，我无法访问这些东西。
在 config.xml 中，是否设置了？我相信默认为 false。
是的。但在任何情况下，此设置都不会发挥任何作用，因为捏缩放是通过 meta 标签启用的。
只是一个想法，不知道 pg build 如何处理 webView props。

标签： ios cordova pinchzoom

【解决方案1】：

下面的css怎么样：

position:fixed;
width:100%;

【讨论】：

感谢您的猜测。不幸的是，将它放在我提供的 html（html、body、#container）的 3 个 css 块中的任何一个上都违反了我的要求，因为用户无法再执行第 3 步（取消缩放）。

【解决方案2】：

问题源于#container 的宽度大于以像素为单位的纵向宽度，因此用户必须手动取消缩放（步骤 3）。取消缩放后将方向更改为横向（第 4 步）在 phonegap 浏览器中效果不佳（但它在常规浏览器中有效）。

所以我找到的解决方案是：

在视口中使用 minimum-scale=1 强制用户无法在 1 以下本地取消缩放（这解决了黑条问题）
使用 css 缩放在每次方向更改时动态调整 #container，从而使大型内容（例如 900 像素宽）适合较小的屏幕（例如纵向 ipad）：

代码

$(window).on("orientationchange", function() {
    var landscape = Math.abs(window.orientation)==90;
    var width = landscape?screen.height:screen.width;
    var divWidth = 900;
    $('#container').attr("style", "zoom: " + (width/divWidth));
});

以上是一种解决方法。真正的 bug 是 phonegap 的浏览器无法像真正的浏览器那样通过自动调整原生缩放来从这种情况中恢复（步骤 4）。

【讨论】：

原生 iOS Web 视图 (UIWebView) 存在完全相同的问题，直到您将其 opaque 属性设置为 NO。

【解决方案3】：

另一种解决方案是在方向更改时简单地重新加载页面。 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;。后者似乎避免了显示屏的可见闪烁。

【讨论】：

【解决方案4】：

fwiw，这个问题已经讨论了很多年了，现在。（例如 iPhone UIWebView width does not fit after zooming operation + UIInterfaceOrientation change ）。而且，不幸的是，这个问题仍然存在。

@cherovium 这里是您建议的解决方法的另一个旋转，而无需跟踪方向。

$(window).on("orientationchange", function() {
             //to avoid all other scenarios but the OP's
             if (window.outerWidth / window.innerWidth >= 1.0) return;
             location.href = location.href;
             //or location.reload();
});

【讨论】：

谢谢。您的链接指向问题的实际根源。在 xcode 中构建时，接受的解决方案也对我有用。

【解决方案5】：

这实际上是 iOS 应用程序中使用的UIWebView 的常见问题，仅通过这行即可解决：

self.webView.opaque = NO;

我不知道 PhoneGap 是否或如何公开 web 视图的这个属性，但如果它公开了，关闭 opaque 属性应该可以解决您的问题。

【讨论】：

谢谢。我不只是想用颜色填充黑色区域。我希望 UIWebView 刷新它的原生缩放，以便内容适合屏幕。
我本地编译，你的建议没有改变任何东西。为了确保我在正确的位置更改了值，添加 self.webView.alpha = 0.7f; 确实有效果。