javascript - 使用移动设备上的按钮打开和关闭用户可扩展性

Question

我的目标是有一个按钮可以打开和关闭移动设备上的缩放功能。

我已经成功地创建了一个按钮，该按钮使用 onClick 事件调用以下函数，以便在它最初以 user-scalable="no"加载后打开用户可缩放，并且它按预期正常工作:

function zoom(){
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=3.0; user-scalable=1;');

alert("does this work?");
}

但是，我需要更进一步，允许用户在第二次触摸按钮时关闭缩放，然后在第三次触摸时再次打开。等下面是当前的javascript代码，if语句可以正常工作，但现在我似乎不能影响缩放的能力。

var toggleZoom = 0;

function zoom(){

toggleZoom++;
var toggleModulus=toggleZoom%2;

if(toggleModulus==1)
{
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=3.0; user-scalable=1;');
        alert("if");
}

else
{
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=device-width;   initial-scale=1.0; maximum-scale=1.0; user-scalable=no;');
        alert("else");
};

alert("function complete");
}

我在这里缺少什么吗？我不明白为什么第一个代码允许我在触摸按钮时打开缩放，但第二个代码却不允许。此外，除了更改属性外，第二个代码中的所有内容似乎都可以正常工作。

Answer 1

一旦您设置了 user-scalable=0，Android 浏览器将不再尊重用户可扩展设置，无论您稍后在同一页面中重新启用它 user -可扩展=1。

相反，始终保留 user-scalable=1 并将 maximum-scale=1.0 修改为 maximum-scale=2.0(作为示例)。

另请参阅此处我的回答以更深入地了解同一问题:

How to enable user-scalable (viewport property) after disabling it?

评论

我真的没有看到在切换用户可扩展性方面给予任何自由的任何目的。如果您正在制作应用程序或正在使用媒体查询，则应始终关闭缩放。否则，如果您的网站不适合移动设备，那么您应该启用用户可扩展性。