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

IT技术 javascript css reactjs browser zooming
2021-05-14 22:27:05

最近的浏览器允许使用 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，浏览器不在乎。

1个回答

要确定允许用户代理（浏览器）处理的最小和最大缩放边界，请使用元标记并在那里设置边界，例如：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 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.00each 和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设备适配，但目前它的支持是按照从低到caniuse.com和MDN。但是，当浏览器供应商根据草稿实现该功能时，您将能够使用min-zoom和max-zoom属性确定样式表中的缩放边界，例如：

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

作为旁注，如果您想使用 JavaScript 检测缩放级别，请查看这篇文章以了解更多详细信息。

其它你可能感兴趣的问题
上一篇RAMPS PLUS 2 和 E1 插座问题（K200 Delta，但与 PCB 相关，与打印机无关） 下一篇更换工具后定位挤出机：Marlin 1.1.6