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上无法复现此bug。在切换屏幕方向时，屏幕可以正确适应。

- cherouvim

---

看起来你的webView没有缩放。请查看webView.scalesPageToFit属性。这是一个ObjC修复，不是CSS。 - gro

由于我是使用PhoneGap Build构建的，所以我无法访问那些东西。 - cherouvim

在config.xml中，是否设置了<preference name="EnableViewportScale" value="true"/>？我相信默认值为false。 - gro

是的。但无论如何，由于通过“meta”标签启用了捏合缩放功能，因此此设置并不起作用。 - cherouvim

只是一个想法，不确定 pg build 如何处理 webView 属性。 - gro

@gro：我在iOS上编译后，设置了 self.webView.scalesPageToFit = YES;，但问题并没有得到解决。 - cherouvim

Answer 1

就我所知，这个问题已经讨论了很多年了（例如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();
});   

- gro

---

谢谢。你的链接指向了实际问题的源头。当在Xcode中构建时，接受的解决方案对我也起作用。 - cherouvim

Answer 2

以下是CSS样式表，您的HTML代码中是否包含它呢？

position:fixed;
width:100%;

- Jack He

---

谢谢您的猜测。不幸的是，在我提供的HTML（html、body、#container）的任何3个CSS块中放置它都会打破我的要求，因为用户不能执行第3步（取消缩放）。 - cherouvim

Answer 3

这个问题的根源在于#container宽度大于像素宽度，因此用户必须手动取消缩放（步骤3）。在取消缩放后更改为横向方向（步骤4）在phonegap浏览器中效果不佳（在常规浏览器中可以正常工作）。

因此，我找到的解决方案是：

1. 使用视口中的minimum-scale=1强制用户无法自然地缩小至1以下（这解决了黑条问题）
2. 使用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));
});

上述方法只是一个解决办法。真正的问题在于，PhoneGap浏览器不能像真正的浏览器一样通过自动适应本地缩放来从该情况（步骤4）中恢复过来的错误。

- cherouvim

---

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

Answer 4

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

- cherouvim

Answer 5

这实际上是在iOS应用程序中使用的UIWebView常见问题，只需添加这一行代码即可解决：

self.webView.opaque = NO;

我不知道PhoneGap是否公开了web view的此属性，但如果它被公开了，则关闭opaque属性应该可以解决您的问题。

- MusiGenesis

---

谢谢。我不仅仅想用颜色填充黑色区域。我希望UIWebView刷新其本地缩放，以便内容适合屏幕。 - cherouvim

我已经进行了本地编译，而你的建议没有改变任何东西。为了确保我修改了正确的位置，添加 self.webView.alpha = 0.7f; 确实产生了效果。 - cherouvim