Since viewport changes have now been disabled, how can I force a viewport 'unzoom' with javascript?

Question

I've implemented a scheme allowing visitors on my website to tap small photos to see a larger view. The tap/click causes a new page element to appear and expand to the max dimensions available for the screen, displaying a higher resolution image there. The reason is to avoid loading high bandwidth images unless the visitor is interested. Once the better hi-resolution image is displayed, the visitor can further expand the image with finger pinch gestures, as its typical for phones. The problem is, if the visitor does manually enlarge the photo, they will be left with an annoying oversized page after dismissing the larger image. And no matter what I do, the visitor's manual adjustment of the image affects the whole page.

For a long time there was a reasonable solution to this, which I found years ago somewhere here on stack exchange. I'd set up a function like this...

function resetScreenSize() {
    var viewport = document.querySelector('meta[name="viewport"]');
    if(viewport===null){
        // just for test alert("no viewport meta");
        return;
        }

    var original = viewport.getAttribute('content');
    var forceScale = original+",maximum-scale=1.0";
    viewport.setAttribute('content', forceScale); 
    setTimeout(function() {
        viewport.setAttribute("content", original);
        }, 100);
    
    }

The idea was to un-do whatever manual zooming the visitor did by adding the "maximum-scale" value of 1 to the viewport, wait a moment for system to settle, and then return the viewport to its original settings (without a maximum scale). After testing this approach with a simple button, I just set up my code to call the function automatically when the visitor dismissed the zoomed image.

Well it seems that Apple, in their infinite wisdom, has decided that IOS devices will no longer honor viewport "maximum-scale", as well as several other options, like disallowing user scaling. It seems to be blocked on other browsers too like Chrome on IOS. So as a result my scheme no longer works. If a visitor picks a full size image and then expands it further, I have no way to set the viewport back to normal, without doing something drastic like re-loading the page.

I've tried a few other approaches I've found on stackexchange, most involving attempts to block zooming to begin with. That's not what I want.

So is there another solution I could consider? I know Social media giants like Facebook have a way of letting a visitor click an image to bring up a larger view, and no matter how the visitor enlarges it manually, things go back to normal once the photo is dismissed. But I don't know how that do it.

Answer 1

I ran in a similar problem a while back and fixed it in a similar way.

One important trick here was the wait with a 100ms. Using 0 would get the code executed immediately and not actually apply anything.

Now, if Apple changed the rules on these viewport parameters (probably because it got abused by some), then one solution I can think of is to use an IFRAME. I think that Facebook uses that technique whenever they open a "popup" with an image in it (and comments on the side). That makes it really easy to close that window and get back to the previous view. Also the viewport scaling factor will be changed in the IFRAME and not the window in the back. So you should get exactly what's necessary.