logo标签列表

如何在iOS Safari中禁用Web应用程序的捏合缩放？

javascripthtmlcss
3

我该如何使用Javascript、CSS或其他方法在Safari/iOS/iPhone上禁用HTML页面的缩放、双指缩放和双击缩放？

1个回答
2

首先，您需要检查您的Web应用程序是否在Safari浏览器上使用。以下是不同浏览器的方法。

<script>
    let browserName = "";

    if(navigator.vendor.match(/google/i)) {
        browserName = 'chrome/blink';
    }
    else if(navigator.vendor.match(/apple/i)) {
        browserName = 'safari/webkit';
    }
    else if(navigator.userAgent.match(/firefox\//i)) {
        browserName = 'firefox/gecko';
    }
    else if(navigator.userAgent.match(/edge\//i)) {
        browserName = 'edge/edgehtml';
    }
    else if(navigator.userAgent.match(/trident\//i)) {
        browserName = 'ie/trident';
    }
    else
    {
        browserName = navigator.userAgent + "\n" + navigator.vendor;
    }
    alert(browserName);
</script>

如果浏览器是Safari，您可以在If条件中禁用缩放。一种选择是为触摸事件设置处理程序 window.addEventListener("touchstart", touchHandler, false); ，然后编写一个touchHandler函数。

function touchHandler(event){
    if(event.touches.length > 1){
        //the event is multi-touch
        //you can then prevent the behavior
        event.preventDefault()

同样地，您可以禁用捏合缩放。
document.addEventListener("touchmove", function(e){
    e.preventDefault();
},{passive: false});

以下是关于触摸事件的更多资源：https://mobiforge.com/design-development/html5-mobile-web-touch-events。根据浏览器的不同，您需要为不同的触摸事件设置处理程序以防止默认的双指缩放行为。请参考此链接：http://www.quirksmode.org/mobile/default.html。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接