javascript - モバイルデバイスのボタンでユーザースケーラブルのオンとオフを切り替える

Question

私の目標は、モバイルデバイスのズーム機能をオンまたはオフにするボタンを用意することです。

onClickイベントを使用して次の関数を呼び出し、user-scalable = "no"で最初にロードされた後、user-scalableをオンにするボタンの作成に成功しました。これは、期待どおりに機能します。

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?");
}

ただし、それをさらに一歩進めて、ユーザーがボタンの2回目のタッチでズームをオフにしてから、3回目に再びオンにできるようにする必要があります。以下は現在の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");
}

ここに欠けているものはありますか？最初のコードでボタンに触れたときにズームをオンにできる理由がわかりませんが、2番目のコードではできません。また、2番目のコード内のすべては、属性を変更することを除いて正しく機能しているようです。