Android HTML5 touchstart屏幕延迟

我正在编写一个HTML5游戏，它在touchstart上更新画布。在运行Android 4.1.1的Galaxy Note 10.1上，触摸事件发生后，屏幕会稍微更新一次。我调查并得出结论，屏幕（只是在屏幕上的任何更改）只需要一段时间后touchstart更新。这里有一个演示：Android HTML5 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后立即更新。

任何想法？

来源

2013-07-05 user2552016

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

来源

2013-07-11 08:23:39 user2552016

当然，你已经花费了大量的时间进行调查。我做到了。 –

我把这个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的行为正常。但现在用户可以放大页面！但是，如果您添加“最大比例= 1”或“用户可扩展= 0”，则会触发touchstart。

而不是添加“最大比例= 1”，尝试“最大比例= 1.01”。

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

Touchstart按预期工作，甚至用户可以缩放页面，他们只能缩小一点点。

来源

2014-05-01 19:56:02

Android HTML5 touchstart屏幕延迟

回答

相关问题