最新的浏览器允许使用 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
中的 head 标签,但似乎也被忽略了。
我也加了
@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">
视口(viewport)中可识别的属性 <meta>
元素是:
-
width
: 设备虚拟视口(viewport)的宽度。 -
height
: 设备“虚拟视口(viewport)”的高度。 -
device-width
:设备屏幕的物理宽度。 -
device-height
:设备屏幕的物理高度。 -
initial-scale
:访问页面时的初始缩放。设置为1.0
不缩放。 -
minimum-scale
:访问者可以在页面上缩放的最小量。设置为1.0
不缩放。 -
maximum-scale
:访问者可以在页面上缩放的最大量。设置为1.0
不缩放。 -
user-scalable
:允许设备放大和缩小。值为yes
或no
.
有关视口(viewport)元元素的官方信息可以在 CSS Device Adaptation 中找到草稿。
允许最小缩放 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% 保证您可以限制最小 和最大 边界。
还有 CSS 规则 @viewport
在CSS Device Adaptation , 但根据 caniuse.com 其支持率目前较低和 MDN .但是,当浏览器 vendor 根据草案实现该功能时,您将能够使用 min-zoom
确定样式表中的缩放边界。和 max-zoom
属性,例如:
@viewport {
zoom: 1.0;
min-zoom: 1.0;
max-zoom: 2.0;
}
作为旁注,如果您想使用 JavaScript 检测缩放级别,请查看 this post了解更多详情。
关于javascript - 有没有办法为浏览器指定最小和最大缩放级别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51667527/