使用移動設備上的按鈕切換用戶可縮放功能

Question

我的目標是擁有一個打開和關閉移動設備上的縮放功能的按鈕。

我已經成功地創建了一個按鈕，它使用onClick事件來調用以下函數，以便在用戶可擴展=「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?

評論

我真的沒有看到任何目的在切換用戶可升級給予任何自由。如果您正在製作應用或正在使用媒體查詢，則應始終關閉縮放。否則，如果您的網站不方便使用移動設備，那麼您應該讓用戶可擴展。