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屏幕延遲

回答

相關問題