CODEWITHSUNDEEP
javascripthtmlcss
Abdul Baqi
Abdul Baqi

Reputation: 31

disable pinch zooming in IOS safari for web apps?

How can I disable zooming, pinch zooming and double tap zooming on my html page for safari/ios/iphone with javascript or css or something else?

Upvotes: 2

Views: 2143

Answers (1)

Himanshu Poddar
Himanshu Poddar

Reputation: 7779

First of all you need to check if your web app is being used on a safari browser. This is how you would do for different browsers.

<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>

And then you can disable zooming inside an If condition if the browser is actually safari. One option is to set a handler for touch events window.addEventListener("touchstart", touchHandler, false); and then write a touchHandler function

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

Similarly you can disable zoom on pinch

document.addEventListener("touchmove", function(e){
    e.preventDefault();
},{passive: false});

Here are some more additional resources about touch events https://mobiforge.com/design-development/html5-mobile-web-touch-events. You will have to set the handler for a different touch event to prevent the default pinch zoom behavior depending on the browser. Please refer this http://www.quirksmode.org/mobile/default.html

Upvotes: 1

Related Questions