防止在Cordova for Windows Phone 8中滚出CordovaView

Question

在Windows Phone 8 Cordova应用程序中，我可以在应用程序中单击并水平拖动，然后平移/滚动显示屏的水平边缘。请参阅Cordova Windows Phone 8独立模板应用程序：

据我所见，此模板应用程序背后的HTML具有正确的视口规范：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

此错误可防止任何类型的滑动手势检测有用。 iOS UIScrollView控件有一个bounces property，可以取消一些类似的效果。

这是Cordova的错误吗？是否有一些设置可以放置在Cordova WebBrowser的容器上，这样就不会发生这种平移？

Answer 1

body标记上的两个额外CSS属性修复了独立模板应用和我正在处理的原始应用中的平移问题：

body {
  overflow: hidden;
  -ms-content-zooming: none; }

此ms-content-zooming属性不会限制作为body元素子元素的元素内的垂直滚动。

Answer 2

请在HTML的正文标签中使用此...我已经修复了弹跳和橡皮筋效果。

 backface-visibility:hidden;
-webkit-backface-visibility:hidden;
 overflow: hidden;
-ms-content-zooming: none;
-ms-touch-action:none;

Answer 3

这是一个非常有效的解决方案：

 <style>
    html {
        -ms-touch-action: pan-x;
        touch-action: pan-x;
    }

    body {
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -ms-content-zooming: none;
    }
</style>

这假设您的应用没有水平滚动（混合原生类应用不应该有）

Answer 4

您可以在MainPage.xaml.cs文件中添加以下代码：

    // Constructor
    public MainPage()
    {
        InitializeComponent();
        .... // some default initialization code was here
        // and disable bouncy scrolling option:
        this.CordovaView.DisableBouncyScrolling = true;
    }

Answer 5

正确的答案是将this.CordovaView.DisableBouncyScrolling = true;添加到您的MainPage.xaml.cs文件中，但在这种情况下，您无法将其用于Adobe Phonegap Build，因为无法提交此xaml文件。

Answer 6

body {-ms-touch-action：none; }

Answer 7

我们在主包装上使用了绝对位置，它修复了我们的用例。

Answer 8

这解决了我的phonegap问题：

if (navigator.userAgent.match(/IEMobile/))
    {
        var ieBodyHeight = $("body").outerHeight();
        var ieBodyHeightNew = ieBodyHeight - 55;
        $("head").append('<meta name="viewport" content="height=' + ieBodyHeightNew + '" />');
    }