Question

最近的浏览器允许使用CTRL +-，CTRL-鼠标滚轮以及触控板上的两根手指手势来更改缩放级别。尽管我本人觉得该功能非常方便（各种网站上的字体通常太小而无法阅读），但我们进行了一些测试会议，测试人员（不知不觉中）应用了极高的缩放级别，因此无法使用任何网页可用的。然后他们声称这样做的可能性是一个错误，用户可能会在不知道自己正在执行缩放的情况下应用缩放，并且可能无法将其重新设置。我被要求完全禁用缩放，但我本人对此并不十分喜欢。

我已证实，除了简单地禁用缩放功能外，我还希望在此范围内设置其最小和最大边界，网站看起来仍然足够好。有关如何完全禁用缩放的问题并非此问题的重复。

该网站建立在React frameweork的顶部。

我试图将以下内容放入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来说，浏览器不在乎。

Answer 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.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％保证您可以限制最小和最大边界。

@viewport中也有CSS规则CSS Device Adaptation，但是根据caniuse.com和MDN来说，目前它的支持率很低。但是，当浏览器供应商将根据草案实现该功能时，您将能够使用min-zoom和max-zoom属性来确定样式表中的缩放边界，例如：

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

请注意，如果要使用JavaScript检测缩放级别，请查看this post了解更多详细信息。

是否可以为浏览器指定最小和最大缩放级别？

1 个答案: