2

我正在编写一个 HTML5 游戏，它会在 touchstart 上更新画布。在我运行 Android 4.1.1 的 Galaxy Note 10.1 上，在 touchstart 事件之后屏幕需要一段时间才能更新。我调查并得出结论，触摸启动后屏幕（只是屏幕上的任何变化）只需要一段时间才能更新。这是一个演示：

<!DOCTYPE html>
<html>
<head>
<script>

document.addEventListener(
    'touchstart',
    function(event) {
        console.log('touchstart');

        document.getElementById('asdf').value = 'asdf';
    }
);  

</script>
</head>
<body>
<input id="asdf" value="qwer" type="text" />
</body>
</html>

以下是一些场景：

  1. 点击屏幕，不要移动你的手指，不要松开你的手指
    • 您需要等待大约半秒钟才能看到更新的文本框
  2. 点击屏幕，移动手指，不要松开手指
    • 屏幕将在您移动手指的那一刻更新
  3. 点击屏幕并释放
    • 屏幕将在您松开手指的那一刻更新

在所有情况下，touchstart 事件都会立即触发，只是屏幕更新被延迟了。这似乎与触发点击事件的 300ms 延迟有关，但问题不同，是屏幕更新延迟。我想我已经尝试了所有明显的事情，比如event.preventDefault或返回 false，将捕获设置为 true 或 false。我也搜索过，但找不到报告的任何类似问题。

它在我的 iPad 和运行 Android 2.3 的 Nexus One 手机上运行良好，屏幕在 touchstart 后立即更新。

有任何想法吗？

4

2 回答 2

2

经过一番调查，我放弃了。它似乎只适用于股票浏览器。股票浏览器也有一些很奇怪的问题，我想我应该只是不提供股票浏览器的支持。

于 2013-07-11T08:23:39.530 回答
1

我将此错误归结为 viewport-meta 标记。如果你有这个错误，你的可能看起来像这样：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

此标签配置可防止用户通过捏合或双击进行缩放。

尝试删除“maximum-scale=1，user-scalable=0”。留下这样的标签：

<meta name="viewport" content="width=device-width, initial-scale=1">

这应该使 touchstart 行为正常。但是现在用户可以缩放页面了！但是，如果您重新添加“maximum-scale=1”或“user-scalable=0”，它会杀死 touchstart。

不要添加“maximum-scale=1”，而是尝试“maximum-scale=1.01”。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.01">

Touchstart 现在按预期工作，即使用户可以缩放页面，他们也只能将其缩放一点点。

于 2014-05-01T19:56:02.990 回答