最近的浏览器允许使用 CTRL +- 、CTRL-鼠标滚轮以及触控板上的两根手指捏合手势来更改缩放级别。虽然我自己发现该功能非常方便（各个网站上的字体通常太小，我无法阅读），但我们进行了一些测试会话，其中测试人员（有意或无意）应用了非常极端的缩放级别，在该级别下，任何网页都无法显示可用。然后他们声称这样做的可能性是一个错误，用户可能会在不知道自己在做什么的情况下应用缩放，并且可能无法将其设置回来。我被要求完全禁用缩放，但我自己不太喜欢这个想法。
我希望能够设置其最小和最大边界，而不是简单地禁用缩放，我已经证实，该网站看起来仍然足够好。如何完全禁用缩放的问题与此问题不重复。
该网站是建立在React框架之上的。
我尝试将以下内容放入CSS中：
body {
min-zoom: 0.75;
max-zoom: 1.5;
}
或
min-zoom: 75%;
max-zoom: 150%;
这没有帮助，缩放可以从 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">
到我的头部标签
index.html我也补充了
@viewport {
zoom: 1.00;
min-zoom: 0.75;
max-zoom: 1.5;
}
对于我的CSS，浏览器不关心。
要确定允许用户代理（浏览器）处理的最小和最大缩放边界，请使用
viewport<meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=2.00, minimum-scale=1.00">
视口
<meta>widthheightdevice-widthdevice-heightinitial-scale1.0minimum-scale1.0maximum-scale1.0user-scalableyesno有关视口元元素的官方信息可以在CSS设备适配草案中找到。
要在页面上允许最小缩放
1.002.00minimum-scale=1.00maximum-scale=2.00<meta name="viewport" content="width=device-width, initial-scale=1.00, minimum-scale=1.00, maximum-scale=2.00">
要禁止页面上的任何缩放，请将比例设置为
1.00user-scalable=no<meta name="viewport" content="width=device-width, initial-scale=1.00, minimum-scale=1.00, maximum-scale=1.00, user-scalable=no">
虽然此功能在广泛的移动平台上得到支持，但并不能 100% 保证您可以限制 minimum 和 maximum 边界。
@viewport，但根据caniuse.com和MDN目前其支持度较低。但是，当浏览器供应商根据草案实现该功能时，您将能够使用 min-zoommax-zoom@viewport {
zoom: 1.0;
min-zoom: 1.0;
max-zoom: 2.0;
}
顺便说一句，如果您想使用 JavaScript 检测缩放级别，请查看 这篇文章 了解更多详细信息。