javascript - 有没有办法为浏览器指定最小和最大缩放级别？

Question

最新的浏览器允许使用 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，浏览器不关心。

Answer 1

要确定允许用户代理(浏览器) 处理的最小 和最大 缩放边界，请使用 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了解更多详情。