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

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

（作为示例）。

另请参阅我的回答，以了解同一问题的更深入内容：

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

评论

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

Answer 2

我来自印度尼西亚，英语说不好，抱歉...

我的代码：

<script type="text/javascript">

var meta1 = document.createElement("meta");
    meta1.setAttribute("charset", "utf-8");

var meta2 = document.createElement("meta"); 
    meta2.setAttribute("name", "viewport");
    meta2.setAttribute("content", "width=device-width,height=device-height,minimum-scale=1,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover,target-densitydpi=device-dpi");

var meta3 = document.createElement("meta"); 
    meta3.setAttribute("name", "theme-color");
    meta3.setAttribute("content", "#0055ff");

var fonts = document.createElement("link");
    fonts.setAttribute("rel", "stylesheet");
    fonts.setAttribute("crossorigin", "anonymous");
    fonts.setAttribute("href", "https://fonts.googleapis.com/css2?family=Text+Me+One&display=swap");

var icons = document.createElement("link");
    icons.setAttribute("rel", "stylesheet");
    icons.setAttribute("crossorigin", "anonymous");
    icons.setAttribute("href", "https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css");

document.getElementsByTagName("head")[0].appendChild(meta1);
document.getElementsByTagName("head")[0].appendChild(meta2);
document.getElementsByTagName("head")[0].appendChild(meta3);
document.getElementsByTagName("head")[0].appendChild(fonts);
document.getElementsByTagName("head")[0].appendChild(icons);</script>