HTML 5 定屏 iPad答案

【问题标题】：HTML 5 fixed screen iPadHTML 5 定屏 iPad
【发布时间】：2011-11-07 18:49:45
【问题描述】：

我似乎找不到正确的标签。当屏幕在 iPad 上的某些位置滑动时，整个屏幕会移动，带有“橡皮筋”效果，我知道有一种锁定屏幕的方法，特定于 HTML5 和 webkit。

使用<iframe src="" width="1024" height="724" scrolling="no"></iframe>

看起来很便宜，这些是我的标题。

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

【问题讨论】：

标签： iphone ipad html webkit

【解决方案1】：

试试这个：

<script>
    // document.body works probably too
    document.ontouchmove = function(e) {
        e.preventDefault();
    };
</script>

请注意，这种方法会禁用整个页面的滚动！有时这可能是不可取的。如果是这样，请查看How to Disable Rubber Band in iOS Web Apps?

【讨论】：

我认为可能有一个新的 webkit 或 html5 元标记可以做到这一点。会试试这个。
不明白事件是做什么的，我认为它不是保留字。你有没有通过
"preventDefault" 取消对事件执行的默认操作（标准 JS 技巧）。我稍微简化了解决方案。有关相关问题，请参阅 stackoverflow.com/questions/500761/…。
我很惊讶这不是一个更常见的解决方法，任何分步教程和 O'Reilly 的书都没有解决这个问题。
这是 JS 编码中相当常见的技巧。请注意，它会在溢出的元素上禁用两个手指“滚动”。我怀疑很多人都在使用它，尽管它是一个相当晦涩的功能。

【解决方案2】：

以防万一人们没有阅读答案中的 cmets，这是我在调查答案时发现的解决方案 @bebraw 的评论：

How to disable rubber band in iOS web apps?

对于这么小的东西，需要做很多工作，但允许对什么得到滚动和什么没有滚动进行细粒度的处理。

【讨论】：