如何在iOS中停止双触摸来缩放整个页面
我有一个内嵌在外窗内的网页应用。
用户可以进行各种触摸操作，例如，通过双指捏将内窗格放大，而无需缩放--在外窗口中，触摸移动到内窗口，等等。
在Android上的Chrome上，该应用程序的运行情况与预期一致。
但是iOS设备上的Safari (iPad)，有时整个窗口在内部窗口的边框上快速双击时会缩放。
我发现可以通过在touchend事件上添加一个事件侦听器来防止这种副作用。
window.addEventListener('touchend', onTouchEnd5, {capture: false, passive: false});并在绑定函数中调用event.preventDefault()。
async function onTouchEnd5( event ) {
console.log('BEG onTouchEnd5');
event.preventDefault();
};但这会导致另一个副作用，即触摸按钮的点击不会被截获。
我尝试在其他可能被默认行为影响的事件上添加事件侦听器，例如click, dblclick, touchcancel, fullscreenchange, fullscreenerror, resize, onscroll
这样做的目的是试图防止这些事件的默认行为，以防产生副作用。(理性的是iphone/ipad can trigger unexpected events)。
从上面列出的事件中，事件onscroll是微不足道的。在绑定到此事件的函数中，我添加了preventDefault()
function onScroll5( event ) {
console.log('BEG onScroll5');
event.preventDefault();
};但是，我仍然可以通过快速双触内窗的边线，使整个窗口变得更加清晰。
如何防止双触时整个窗口在iOS中缩放？
注意：
整个窗口的缩放是最新的观察。
在此之前，我发现整个窗口都在缩放，例如在窗户的另一部分做双指捏。
在这种情况下，解决方案是在另一个事件侦听器绑定函数上添加preventDefault。
考虑到应用程序中有多个事件，一个更普遍的问题是：
是否有办法防止整个窗口在eny事件中全部缩放？
谢谢
回答 2
Stack Overflow用户
发布于 2021-02-08 23:26:01
我找到了解决办法。
我有以下DOM结构：
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<canvas>...</canvas>
</div>
</div>
<div id="div4">
<div id="div5"><button></div>
</div>
</div>
</body>我最初尝试在event.preventDefault()中添加onTouchStartDiv3()，后者侦听画布元素中的事件(与事件侦听器最近的上游元素是div3)。
这解决了边界上的双重接触问题，但也引起了另一个问题：
onTouchMoveDiv3()被立即调用(甚至没有移动手指)，这导致了其他副作用。(我在这个级别上有一些状态机，这取决于onTouchStartDiv3(), onTouchMoveDiv3(), onTouchEndDiv3())。
然后，我尝试在窗口/文档级别(onTouchStartWindow(), onTouchStartDocument())添加事件侦听器，并在其中调用event.preventDefault()。
这再次解决了边界上的双重接触问题，但也造成了另一个问题：
按钮(div5)停止响应触摸事件。
原因是，由于按钮上没有特定的事件侦听器，所以事件被截获得更高，并且应用了默认行为。
因为名为event.preventDefault()的窗口/文档事件侦听器阻止了这种行为(这阻止了按钮响应触摸事件)。
最后，我在触摸边框级别(div2)添加了事件侦听器。
在onTouchStartDiv2()内部，我将event.currentTarget (div2)与事件起源的event.target进行比较。
如果event.target是div2，那么事件起源于单击边框，所以我应用event.preventDefault()来防止在iOS上调整整个图像的副作用。
如果event.target是而不是 div2，那么事件起源于单击，例如在画布中，所以我做not apply event.preventDefault()来维护状态机。
根据这个逻辑，我解决了这个问题：
- 在触摸画布元素(
div3是与事件侦听器最近的上游元素)时，应用了常规行为。
- 在触摸边框元素(
div2)时，将event.preventDefault()应用于事件侦听器，并防止了调整整个窗口大小的默认行为(我希望禁用此行为)。
- 在触摸按钮元素(
div5)时，应用了常规行为，因此按钮响应触摸事件。
Stack Overflow用户
发布于 2021-02-08 02:44:04
我找到了一个麻烦的解决方案。
- 创建一个名为
/mobile的页面，或者使用/将所有内容放在一个名为/maincontent的页面上，并在下一步使用该URL。
<iframe src='/ (or "maincontent")' style='width:100vw;height:100vh;top:0;left:0;position:fixed;border:none;' frameborder='0'></iframe>我知道这有点麻烦，但它在iOS 14上适用于我。
https://stackoverflow.com/questions/66094261
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号