更改视口缩放(缩小)仅适用一次

时间:2014-08-14 11:20:40

标签: jquery ios viewport pinchzoom initial-scale

我有关于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. 弹出式事件更改视口内容,使其缩小至0.75 [代码块#1]
  4. 当弹出窗口关闭时,视口内容会重置 [code block#2]
  5. 这可以正常工作,直到用户在第一个视口更改后执行一次缩放操作,并再次触发弹出事件。然后应用的视口属性不会生效,它将保持放大而不是缩放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。

1 个答案:

答案 0 :(得分:0)

抓住稻草,但试试这个

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