触摸全屏事件在Chrome浏览器上无法正常工作

Question

在我的移动应用程序中，当用户向上滑动时，我希望能切换到全屏模式。
所以当触发touchend事件时，我调用document.documentElement.webkitRequestFullScreen();
问题是，它在移动Chrome 56+中对我不起作用。

这里有一个例子。 https://jsfiddle.net/ibmw/tnncaxj0/6/ 有趣的部分是：只有在touchstart和touchend之间进行touchmove时才会出现此问题。

在控制台中，我得到了一个错误：

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture. document.documentElement.webkitRequestFullScreen();

有人知道如何解决吗？

- Andrii Tsarenko

Answer 1

您需要在touchmove事件上调用preventDefault()，并向addEventListener()传递新选项。这对我很有效：

addEventListener('touchmove', onTouchMove, {passive: false});

function onTouchMove(e) {
  e.preventDefault
}

- Andrii Tsarenko

---

这是有效的，因为当用户仅使用触摸滚动页面时，您无法再触发全屏。此代码防止滚动，因此用户的滑动被视为真正的交互。 - Matthew Gatland

自Chrome 56版本开始，“touchmove”事件将不再触发用户手势，因此无法用于激活全屏模式。现在，您必须在使用上述代码防止默认触摸滚动行为后，在“touchend”事件中调用requestFullscreen()。https://www.chromestatus.com/feature/6131337345892352 - Besworks