Mobile Pinch zoom problem

[Phil1991]

Hi,

I'm working on an interface and I have a problem with zoom management. In desktop mode it works and in android cell mode it seems to work fine too. However, on a Windows tablet, it seems to have a problem ... Basically what I'm trying to do is display a modal in bootstrap 4. But when on the tablet I zoom, my modal s really big and out of my screen. On the android mobile, I remove the zoom before displaying the modal but on the Windows tablet I am unable to reproduce the same behavior.

 

My toggle function to reset zoom before display modal  ( Yeah it maybe sketches but I'm not find other solutions)

function resetZooming() {   

    if (zoomOut) {

        $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1');

        setTimeout(resetZooming, 1000);

        zoomOut = false;

    }else{

        $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0');

        zoomOut = true;

    } 

}

And I call this function under my event

$("#modalCreationForm").modal("show");
resetZooming();

 

If you have any ideas

Thank you

Edited June 11, 2019 by Phil1991

[danielcharles]

Hello,

this will prevent any zoom action by the user in ios safari and also prevent the "zoom to tabs" feature:

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gesturechange', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gestureend', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});