javascript - 使用meta标签将页面缩放到1.0

当我从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无效？

最佳答案

不幸的是，这种方法永远不会起作用，因为存储视口(viewport)元标记的content属性的变量(在这种情况下为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值(视口(viewport)元标记的默认内容属性)定义一个新变量，以便从一开始就将其正确存储-像这样:

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上发生冲突。