4

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

我已经成功地创建了一个按钮，该按钮使用 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");
}

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

4

1 回答 1

1

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

相反，总是离开user-scalable=1并改为修改maximum-scale=1.0为maximum-scale=2.0（例如）。

另请参阅我的答案以更深入地了解同一问题：

禁用后如何启用用户可缩放（视口属性）？

评论

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

于 2013-06-05T07:13:46.133 回答