Javascript 有没有办法指定浏览器的最小和最大缩放级别？

最新的浏览器允许使用CTRL+-、CTRL鼠标滚轮和触摸板上的两个手指按压手势更改缩放级别。虽然我自己发现这个功能非常方便（各种网站上的字体通常太小，我看不懂），但我们有一些测试会议，测试人员（有意或无意）在没有网页可用的情况下应用了非常极端的缩放级别。然后他们声称这样做的可能性是一个bug，用户可能在不知道自己在做什么的情况下应用缩放，并且可能无法将其设置回原位。我被要求完全禁用缩放功能，但我自己也不太喜欢这个想法

我不想简单地禁用缩放功能，我希望能够设置它的最小和最大边界，我已经验证过，这个网站看起来仍然足够好。如何完全禁用缩放的问题与此问题不重复

该网站是建立在React框架之上的

我尝试在CSS中添加以下内容：

body {
  min-zoom: 0.75;
  max-zoom: 1.5;
}

或

这是没有帮助的，缩放允许从25%更改为500%，这是我的设计无法管理的。其他属性，如

body {
  margin: 200px;
}

因此，标签或整个css文件不会被忽略

我还试图补充一点

<meta name="viewport" content="width=device-width, 
   initial-scale=1.00, maximum-scale=1.5, minimum-scale=0.75">

---

对于我的css，浏览器不关心。

要确定允许用户代理（浏览器）处理的最小值和最大值缩放边界，请使用元标记并在此处设置边界，例如：

<meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=2.00, minimum-scale=1.00">

要禁止对页面进行任何缩放，请将每个缩放比例设置为

1.00

，并且

用户可缩放=否

：

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

---

---

作为补充说明，如果您想使用JavaScript检测缩放级别，请查看更多详细信息。

Hi，似乎放大和缩小会触发窗口的

resize

事件：

window.addEventListener（'resize'，（event）=>{console.log（this.innerWidth）；}）

您也可以使用CSS

zoom

，但它似乎没有得到很好的支持。对于你的设计来说，切换到相对单位可能有助于在用户缩放时保持一致properties@h22似乎它们应该被定义为

@viewport

规则而不是

主体

谢谢你的提示，我已经应用了它们，并在奖励中对答案进行了投票。不幸的是，变焦级别仍然从25%变为500%，好像什么都没做过，但也许将来会触发一些事情。欢迎你，谢谢你！请您编辑您的帖子，并尽可能多地添加信息，以便我们更好地确定问题的根本原因，好吗？使用了什么移动设备来测试站点？你能粘贴你的实际HTML吗，也许是一个测试站点（GitHub、BitBucket等）。这个问题也困扰着我，因为当您禁止缩放或通过

meta

标记确定最大缩放时，浏览器不应该允许进一步缩放。提前谢谢！这不是一个移动设备，它是谷歌Chrome桌面浏览器。请检查，可能是

目标密度dpi=设备dpi

起作用，然后再联系我。

<meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=2.00, minimum-scale=1.00">

<meta name="viewport" content="width=device-width, initial-scale=1.00, minimum-scale=1.00, maximum-scale=2.00">

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

@viewport {
  zoom: 1.0;
  min-zoom: 1.0;
  max-zoom: 2.0;
}