时间戳

首页 > 解决方案 > 有没有办法为浏览器指定最小和最大缩放级别？

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

问题描述

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

标签： javascriptcssreactjsbrowserzooming

解决方案

要确定允许用户代理（浏览器）处理的最小和最大缩放边界，请使用元标记并在那里设置边界，例如：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.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 Device Adaptation@viewport中也有 CSS at-rule ，但根据caniuse.com和MDN的说法，目前它的支持率很低。但是，当浏览器供应商根据草案实现该功能时，您将能够使用和属性确定样式表中的缩放边界，例如：min-zoommax-zoom

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

附带说明一下，如果您想使用 JavaScript 检测缩放级别，请查看这篇文章了解更多详细信息。

推荐阅读