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

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.

有关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规则,但根据caniuse.com和MDN,它的支持目前很低.但是,当浏览器供应商根据草稿实现该功能时,您将能够使用min-zoom和max-zoom属性确定样式表中的缩放边界,例如:

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

作为旁注,如果您想使用JavaScript检测缩放级别,请查看此帖子以获取更多详细信息.