10

为模棱两可的标题道歉；但是我正在尝试将在 Android 和 iOS 上运行良好的 PhoneGap 应用程序移植到 Windows Phone 8（用 jQuery Mobile/JavaScript、HTML 和 CSS3 编写）。

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

在滚动停止工作之前，我遇到了页脚栏和页面底部之间的间隙问题：

jQuery 移动差距

有人建议我做的一件事是添加以下 CSS；它解决了“差距”问题：

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

jQuery Mobile 差距修复

但是，它随后导致滚动功能变得无响应。整个页面向上/向下移动，但不是与我想要的相反的列表元素！我尝试添加以下内容，但没有运气：

-ms-touch-action: none;

我将此添加到包含页面的 div 元素中。它停止了页面上下移动！然而，这份名单仍然没有反应。但是，如果我删除这两个 CSS 类，则滚动功能会再次起作用，但这会重新引入间隙问题。视口 CSS 类绝对是我相信的正确途径——但我不能，就我的一生来说，让它按照我想要的方式工作。

如果有人可以提供帮助，将不胜感激。

谢谢。

4

2 回答 2

4

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

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

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

body {
  overflow: hidden;
  -ms-user-select: none;
  -ms-content-zooming: none;
  -ms-touch-action: none;
}
于 2013-09-23T08:51:39.487 回答
1

你可以在你的css中使用它，它会修复你的页脚。

[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}
于 2013-09-02T11:03:40.593 回答