时间戳

首页 > 解决方案 > 由于现在已禁用视口更改，如何使用 javascript 强制视口“取消缩放”？

javascript - 由于现在已禁用视口更改，如何使用 javascript 强制视口“取消缩放”？

问题描述

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

很长一段时间以来，对此都有一个合理的解决方案，几年前我在堆栈交换的某个地方找到了这个解决方案。我会设置这样的功能......

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

好吧，苹果似乎以其无限的智慧决定 IOS 设备将不再支持视口“最大缩放”，以及其他几个选项，例如不允许用户缩放。它似乎在其他浏览器上也被阻止，例如 IOS 上的 Chrome。因此，我的计划不再有效。如果访问者选择了一个完整尺寸的图像，然后进一步扩展它，我无法将视口设置回正常，而无需执行诸如重新加载页面之类的激烈操作。

我尝试了在 stackexchange 上找到的其他一些方法，其中大多数都尝试阻止缩放。那不是我想要的。

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

标签： javascriptviewportscalingpinchzoom

解决方案

不久前我遇到了类似的问题并以类似的方式修复了它。

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

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

推荐阅读