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-scalable=1中重新启用该设置。

相反，请始终离开user-scalable=1，而是将maximum-scale=1.0修改为maximum-scale=2.0（作为示例）。

另请参阅我的答案，以了解更多相同问题：

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

<强>评论

我真的没有看到任何改变用户可扩展性的自由。如果您正在制作应用或使用媒体查询，则应始终关闭缩放。否则，如果您的网站不适合移动设备，那么您应该保持用户可扩展性。

使用移动设备上的按钮切换用户可扩展的打开和关闭功能

1 个答案: