Question

我正在编写一个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>

以下是一些方案：

点击屏幕，不要移动手指，不要松开手指
- 您需要等待大约半秒才能看到文本框已更新
点击屏幕，移动手指，不要松开手指
- 屏幕将在您移动手指的那一刻更新
点按屏幕并释放
- 当您松开手指时屏幕将会更新

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

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

有什么想法吗？

Answer 1

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

Answer 2

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

<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现在按预期工作，即使用户可以缩放页面，他们也只能缩小一点。

Android HTML5 touchstart屏幕延迟

2 个答案: