Question

当我从HTML页面发起JS应用程序时，我使用这两个函数来设置和重置比例值。

function setMeta(){
        alert("meta set");
        oldcontent=$('meta[name=viewport]').attr('content') //store the current value
        $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, user-scalable=0');
}

function resetMeta(){
        alert("meta reset");
        $('meta[name=viewport]').attr('content', oldcontent);

}

代码工作正常，除非HTML页面缩放到更大的值，它不会像setMeta方法那样设置为1.0。像user-scalable这样的其他值也可以正常工作。示例：在HTML页面中，我们可以扩展，但在应用程序中我们不是。

这也不起作用：document.body.style.zoom="100%"; 为什么不将规模重新设置为1.0工作？

Answer 1

遗憾的是，这种方法永远不会起作用，因为存储视口元标记的内容属性的变量（在本例中为defaultContent）总是会获取当前值。实现这项工作的唯一方法是明确定义defaultContent，就像我使用customContent一样。

首先，让我们看看为什么最初的方法不起作用：

访问Smashing Magazine时，在console上尝试使用此代码：

defaultContent = jQuery('meta[name=viewport]').attr('content'); // store the current value in a global variable
console.log(defaultContent);

function setV(){
    // override the global variable value with a scoped variable
    var customContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, user-scalable=0';
    jQuery('meta[name=viewport]').attr('content', customContent);
    console.log('Set viewport content to: ' + customContent);
}
function resetV(){
    jQuery('meta[name=viewport]').attr('content', defaultContent);
    console.log('Reset viewport content to: ' + defaultContent);
}

确保直接在控制台上测试setV();或resetV();，方法是输入并再次点击Run。正如您所看到的，它不起作用，因为defaultContent设置为获取动态值，而setV()函数会更改该值。

使其有效

正如我已经提到的，如果您希望它在您的网站上运行，您可以使用defaultContent值（视口元标记的默认内容属性）定义新变量，所以你从一开始就妥善存储 - 就像这样：

defaultContent = 'width=device-width, initial-scale=1.0';
customContent = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, user-scalable=0';

function setV(){
    jQuery('meta[name=viewport]').attr('content', customContent);
    console.log('Set viewport content to: ' + customContent);
}
function resetV(){
    jQuery('meta[name=viewport]').attr('content', defaultContent);
    console.log('Reset viewport content to: ' + defaultContent);
}

并非我将$更改为jQuery以避免Smashing Magazine发生冲突。

Answer 2

需要注意的一点是，重置视口标记时，必须记住覆盖您设置的上一个视口属性。例如，如果您希望将视口标记设置为

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

在resetMeta()函数中，您需要将值设置回此类

<meta name="viewport" content="width=920, initial-scale=5.0, maximum-scale=5.0, user-scalable=yes" />

不是这样的：

<meta name="viewport" content="initial-scale=5.0" />

记住不要错过任何宽度或比例。

您示例的已修改版本：http://hosting.ambc.hostei.com/html/test.html

使用元标记将页面缩放到1.0

2 个答案:

首先，让我们看看为什么最初的方法不起作用：

使其有效