由于现在已禁用视口更改，我如何强制使用 javascript 的视口 'unzoom'？

Question

我实施了一项计划，允许我网站的访问者点击小照片以查看大图。 tap/click 会导致一个新的页面元素出现并扩展到屏幕可用的最大尺寸，在那里显示更高分辨率的图像。原因是为了避免加载高带宽图像，除非访问者感兴趣。一旦显示出更好的高分辨率图像，访问者就可以使用手指捏合手势进一步扩展图像，这是手机的典型做法。问题是，如果访问者手动放大照片，他们将在关闭较大的图像后留下一个烦人的超大页面。而且无论我做什么，访问者手动调整图片都会影响整个页面。

长期以来一直有一个合理的解决方案，这是我几年前在堆栈交换的某个地方找到的。我会设置这样的功能...

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);
    
    }

这个想法是通过将“最大比例”值 1 添加到视口来取消访问者所做的任何手动缩放，等待系统稳定下来，然后 return 视口到其原始设置（没有最大比例）。在用一个简单的按钮测试了这种方法之后，我只是将我的代码设置为在访问者关闭缩放图像时自动调用该函数。

好吧，似乎 Apple 以其无限的智慧决定 IOS 设备将不再支持视口“最大比例”以及其他几个选项，例如不允许用户缩放。它似乎也像 IOS 上的 Chrome 一样在其他浏览器上被阻止。因此，我的方案不再有效。如果访问者选择全尺寸图像然后将其进一步放大，我无法将视口设置回正常状态，除非做一些像重新加载页面这样激烈的事情。

我已经尝试了在 stackexchange 上发现的其他几种方法，大多数都涉及尝试阻止缩放。这不是我想要的。

那么我可以考虑其他解决方案吗？我知道像 Facebook 这样的社交媒体巨头有一种方法可以让访问者单击图片以显示更大的视图，无论访问者如何手动放大它，一旦照片被关闭，事情就会恢复正常。但我不知道那是怎么做到的。

Answer 1

我运行前阵子和 fixed it in a similar way.

遇到过类似的问题

这里的一个重要技巧是等待 100 毫秒。使用 0 会立即执行代码而不实际应用任何东西。

现在，如果 Apple 更改了这些视口参数的规则（可能是因为它被某些人滥用了），那么我能想到的一种解决方案是使用 IFRAME。我认为 Facebook 在打开带有图像的“弹出窗口”（以及旁边的评论）时都会使用该技术。这使得关闭 window 并返回到之前的视图变得非常容易。此外，视口缩放因子将在 IFRAME 中更改，而不是后面的 window。所以你应该得到什么是必要的。

由于现在已禁用视口更改，我如何强制使用 javascript 的视口 'unzoom'？

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

javascript

viewport

scaling

pinchzoom