jquery - 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 类，则滚动功能会再次起作用，但这会重新引入间隙问题。视口(viewport) CSS 类绝对是我认为的正确路线 - 但我不能，就我的生活而言，让它按照我希望的方式工作。

如果有人能提供帮助，我们将不胜感激。

谢谢。

Answer 1

首先，@-ms-viewport 不支持缩放，所以去掉缩放属性，因为它们会产生解析错误。列出了支持的属性 here

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

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

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