最近的浏览器允许使用 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>
元素中可识别的属性有:
width
:设备虚拟视口的宽度。height
:设备“虚拟视口”的高度。device-width
:设备屏幕的物理宽度。device-height
:设备屏幕的物理高度。initial-scale
:访问页面时的初始缩放。设置为 1.0
不会缩放。minimum-scale
:访问者可以在页面上缩放的最小量。设置为 1.0
不会缩放。maximum-scale
:访问者可以在页面上缩放的最大数量。设置为 1.0
不会缩放。user-scalable
:允许设备放大和缩小。值为 yes
或 no
。有关视口元元素的官方信息可以在CSS设备适配草案中找到。
要在页面上允许最小缩放
1.00
和最大缩放2.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=2.00">
要禁止页面上的任何缩放,请将比例设置为
1.00
和 user-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-zoom
和 max-zoom
属性确定样式表中的缩放边界,例如:
@viewport {
zoom: 1.0;
min-zoom: 1.0;
max-zoom: 2.0;
}
顺便说一句,如果您想使用 JavaScript 检测缩放级别,请查看 这篇文章 了解更多详细信息。