Windows Phone 8 WebView页面不是静态的(jQuery Mobile/PhoneGap)

Question

为模棱两可的标题道歉; 但是我试图将我们在Android和iOS上运行良好的PhoneGap应用程序移植到Windows Phone 8上(用jQuery Mobile/JavaScript,HTML和CSS3编写).

它的大部分工作(虽然我不得不改变几个位,但这是预期的).我目前遇到的一个主要问题是让我们的应用程序的滚动列表功能正常工作,以及签名捕获(我相信两者都是相关的).我不太确定问题出在哪里但是当我滚动/签名时,整个页面都会用我的手指移动,并且各个元素都不会接收触摸事件.我正在使用iScroll,jQuery 1.7.2和jQM 1.1.0; 但是,继续阅读因为滚动功能正在运行(签名功能一直是个问题)!

在滚动停止工作之前,我在页脚栏和页面底部之间存在间隙问题:

我被建议做的一件事是添加以下CSS; 它解决了"差距"问题:

@media screen and (orientation: portrait) {
    @-ms-viewport {
        width: 320px;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

但是,它导致滚动功能无响应.整个页面向上/向下移动但不是列表元素,这与我想要的相反!我试过添加以下但没有运气:

-ms-touch-action: none;

我把它添加到包含页面的div元素中.它停止了页面上下移动!然而,该名单仍然没有反应.但是,如果我删除这两个CSS类,那么滚动功能会再次起作用,但这会重新引入间隙问题.视口CSS类绝对是我认为的正确路线 - 但我不能,为了我的生活,让它以我喜欢的方式工作.

如果有人可以提供帮助,我们将不胜感激.

谢谢.

Answer 1

首先，@-ms-viewport不支持缩放，因此删除缩放属性，因为它们会生成解析错误。此处列出了支持的属性

其次，尝试将此规则添加到您的 CSS 中，并按照您所说的在中央容器中使用 iScroll

@-ms-viewport{width:device-width;}

body {
  overflow: hidden;
  -ms-user-select: none;
  -ms-content-zooming: none;
  -ms-touch-action: none;
}