更改视口缩放（缩小）仅适用一次

Question

我对 iPad 的缩放有疑问。

点击时，用户应该会看到一个带有叠加层的弹出窗口，并且视图不应该被缩放——这意味着它应该缩小到 0.75 倍（基本上是尽可能地缩小）。因此，我将此 jQuery 代码应用于视口：

$('meta[name="viewport"]').attr('content', 'width=1020, height=device-height, initial-scale=0.75, minimum-scale=0.75, maximum-scale=0.75, user-scalable=no');

关闭时我也将其重置为原始值以启用缩放。像这样：

$('meta[name="viewport"]').attr('content', 'width=1020');

所以重申一下：

1. 用户访问页面，初始视口内容为width=1020
2. 用户单击触发弹出窗口的元素，用户可能已经在页面上捏拉放大了
3. Popup 事件更改视口内容，使其缩小到 0.75 [代码块 #1]
4. 当弹出窗口关闭时，视口内容被重置 [代码块 #2]

这可以正常工作，直到用户在第一个视口更改后执行一个捏缩放操作，并再次触发弹出事件。然后应用的视口属性不会生效，它会保持放大而不是0.75。

TLDR：视口横向扩展仅适用一次 :)

附加更多代码：

$('body').on('click', '#large-image', function() {
    $('meta[name="viewport"]').attr('content', 'width=1020, height=device-height, initial-scale=0.75, minimum-scale=0.75, maximum-scale=0.75, user-scalable=no');
    // HERE GOES CODE THAT CREATES A FIXED DIV WITH 100% IN BOTH HEIGHT AND WIDTH
});
$('body').on('click', '#zoomPinchClose', function() {
    // REMOVE THE FIXED DIV
    $('meta[name="viewport"]').attr('content', 'width=1020');
});

基本上就是这样。没有造型的身体。只会创建一个拉伸的固定 div。

Answer 1

在这里抓住稻草，但试试这个

$('body').on('click', '#zoomPinchClose', function() {
    // REMOVE THE FIXED DIV
    $('meta[name="viewport"]').removeAttr("content");
    $('meta[name="viewport"]').attr('content', 'width=1020');
});