Question

我想制作html5全屏应用。我制作了一个页面并将其作为图标添加到我的iphone中。我添加了元标记：

 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <meta name="viewport" content="width=device-width, user-scalable=no" />

我想要实现的是：顶部的黑色状态栏（这不起作用，我不知道为什么。它仍然是默认状态栏...任何想法？）无法缩放（如在facebook应用程序中） - 这很好。

现在问题 - 即使我的应用程序适合屏幕，我也可以在我的iphone上滚动。它反弹回来，但我不想要这种行为。我想禁用它并启用特定div（.ui-content）的滚动。我怎样才能做到这一点？

修改状态栏现在是黑色的。一段时间后它发生了变化。以前的版本是在iphone上缓存还是什么？

Answer 1

这样可以防止在整个页面上滚动

document.ontouchmove = function(e) {e.preventDefault()};

在您的情况下，您希望某些div可以滚动，而某些div不能滚动，您应该能够在它到达文档之前捕获该事件

scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};

Answer 2

如果您使用Cordova 1.7+，请打开Cordova.plist文件并将关键UIWebViewBounce设置为NO

Answer 3

扩展dmanxii的方法就是我们正在做的事情。

    $("body").on("touchmove", function (event) {
        if ($(event.target).is(".WhatEverClass") || $(event.target).parentsUntil().is(".ParentClass")) {
            //console.log("NOT Disabled"); 
        }
        else {
            //console.log("Disabled"); 
            event.preventDefault();
        }
    });

如何在html5全屏iPhone应用程序中禁用弹跳？

3 个答案: