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

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

不幸的是，这种方法永远行不通，因为存储视口(viewport)元标记内容属性的变量(在本例中为 defaultContent)总是会获取当前值。使这项工作有效的唯一方法是显式定义 defaultContent，就像我对 customContent 所做的那样。

首先，让我们看看为什么初始方法不起作用:

在访问 Smashing Magazine 时在您的控制台 上尝试此代码:

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