如何防止用戶放大我的網站？

Question

如何防止用戶放大網站？

我正在嘗試開發一個可以為其他網站創建設計的 React 網站應用程序。 我能找到的一個現有網站是Figma ，它有一個奇特的功能：用戶無法在我的觸摸板上使用捏合移動來放大其網頁，這非常有用，因為工具欄將始終存在。 請注意，我使用的是 Mac 計算機而不是觸摸屏設備。

編輯：我已經提供了讓用戶放大中央頁面的功能。 （S:__% 在這里表示縮放。）但是當用戶嘗試放大頁面時，我只想放大中央頁面，而讓那些工具欄保持不變。 目前，當用戶放大頁面時，工具欄也會被放大。

我花了大約 4 個小時尋找如何實現此功能，但還是失敗了。 有人可以幫我解決這個問題嗎？ 我感謝您的時間和精力！ 非常感謝！

到目前為止我嘗試過的事情：

<meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

CSS:
html, body, #root, .app {
  height: 100%;
  width: 100%;
  touch-action: pan-x pan-y;
}

window.addEventListener("resize", () => {console.log("...")});

document.body.addEventListener("transitionstart", ()=>{...});

/* 
   Listening to touchstart, touchend, touchmove events 
   (I'm not using touch screen devices so this doesn't work).
   Monitoring dpi changes 
   (dpi doesn't change during magnification), 
*/

這是我的應用程序（它仍然是一個原型）。

這是我放大后的應用程序（顯然我不希望用戶這樣做）。

這是 Figma 的頁面。 放大在其頁面上不起作用。

Answer 1

使用鍵盤快捷鍵縮放

正如這個問題（StackOverflow 上的“防止縮放跨瀏覽器”）所指出的，您可以監聽keydown事件並使用event.preventDefault()來阻止用戶放大和縮小您的頁面（如果他們使用鍵盤快捷鍵這樣做）但他們仍然可以繼續瀏覽器設置並手動調整它。

它會是這樣的：

window.addEventListener('keydown', function(e) {
    // Key codes 187 and 189 are for '+' and '-' keys (this may change from browser to browser)
    if (e.ctrlKey && (e.keyCode === 187 || e.keyCode === 189)) {
        e.preventDefault();
        // ... code to zoom your main pane
    }
});
// code tested on Brave Browser

這不一定是壞事。 正如我在評論中指出的那樣，用戶可能有很好的理由放大和縮小您的網站，例如提高可訪問性。 您可以做的是阻止他們使用默認快捷方式來執行此操作，就您的特定用例而言，默認情況下不是縮放頁面上的所有元素，而是縮放“主窗格”似乎是合理的。 我建議您保留默認值並使用您自己的快捷方式來放大和縮小（並確保它們不會干擾任何其他默認快捷方式）。

更多關於MDN 網絡文檔上的鍵盤事件 ：KeyboardEvent

使用觸摸板縮放

至於使用觸摸板解決縮放問題，您可以收聽 Touch Events（在MDN Web Docs: Touch events上了解更多信息）並調整其行為。 同樣，用戶仍然可以轉到他們的瀏覽器設置並在那里調整縮放級別。

一些評論

我不知道有什么方法可以阻止用戶從瀏覽器設置中調整縮放級別，如果它根本不存在，我會很高興，根本阻止用戶縮放頁面是一個糟糕的 UX 決定，它是不利於可訪問性。

作為一個 Web 開發人員，只是一個一般性的建議：永遠不要犧牲可訪問性。 每當您考慮調整某些默認瀏覽器行為時，請首先考慮為什么要實現它，並考慮可能依賴它來訪問您的應用程序的人。

Answer 2

寬度的值可能因您而異，但防止用戶縮放是在視口元標記中設置的，如下所示： <meta name="viewport" content="width=device-width, user-scalable=no">

除非我誤解了你的問題，否則應該解決它。