如何防止用户放大我的网站？

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">

除非我误解了你的问题，否则应该解决它。