Viewport changes no longer allowed! How can I force viewport ‘unzoom’

@PeterPan_321

Copy linkTweet thisAlerts:

Nov 23.2020

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