有没有一种方法可以指定浏览器的最小和最大缩放级别？ [英] Is there a way to specify minimum and maximum zoom level for a browser?

问题描述

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

Recent browsers allow to change the zoom level with CTRL +- , CTRL-mouse wheel and also two finger pinch gesture on the trackpad. While I myself find the feature very convenient (the fonts on various websites are often too small for me to read), we had some testing sessions where the tester (knowingly on unknowingly) applied very extreme zoom level under that no web page ever could be usable. Then they claim that possibility to do this is a bug, that the user may apply the zoom without knowing that is he doing and may not be able to set it back. The I am asked to disable the zoom completely but I do not like this idea myself very much.

除了简单地禁用缩放外，我还希望设置其缩放比例根据我的验证，该网站的最小和最大边界仍然足够好。如何完全禁用缩放的问题并非此问题的重复。

Instead of simply disabling the zoom, I would like the possibility to set its minimal and maximal boundaries under that, I have verified, the website still looks good enough. Questions how to disable the zoom completely are not duplicates of this question.

该网站建立在React框架的顶部。

The website is build on the top of React framework.

我尝试在CSS中放入以下内容：

I tried to put the following in CSS:

body {
  min-zoom: 0.75;
  max-zoom: 1.5;
}

或

  min-zoom: 75%;
  max-zoom: 150%;

这没有帮助，缩放比例可以从25％更改为我的设计无法管理​​的500％ 。其他属性，如

This was not helpful, zoom is allowed to change from 25 to 500 % that my design just cannot manage. Other properties like

body {
  margin: 200px;
}

在此位置受尊重，因此标记或整个CSS并非如此文件只是被忽略。

are respected in this place hence it is not so that the tag or whole css file is just ignored.

我也尝试添加

<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来说，浏览器不在乎。

to my css, browser does not care.

推荐答案

要确定用户代理（浏览器）最小和最大缩放边界， / em>可以处理，请使用 viewport 元标记并在其中设置边界，例如：

To determine the minimum and maximum zoom boundaries the user agent (browser) is allowed to handle, use the viewport meta tag and set your boundaries there, e.g.:

<meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=2.00, minimum-scale=1.00">

视口中可识别的属性< meta> 元素为：

The recognized properties in the viewport <meta> element are:

• width ：该对象的虚拟视口的宽度


• height ：设备的虚拟视口的高度。


• 设备宽度：设备屏幕的物理宽度。


• 设备高度：设备屏幕的实际高度。


• 初始比例：访问页面时的初始缩放。设置为 1.0 不会缩放。


• 最小比例：最小值访问者可以放大页面的数量。设置为 1.0 不会缩放。


• 最大比例：最大值访问者可以放大页面的数量。设置为 1.0 不会缩放。


• 用户可缩放：设备进行放大和缩小。值为是或否。



• width: The width of the virtual viewport of the device.
• height: The height of the "virtual viewport" of the device.
• device-width: The physical width of the device's screen.
• device-height: The physical height of the device's screen.
• initial-scale: The initial zoom when visiting the page. Setting to 1.0 does not zoom.
• minimum-scale: The minimum amount the visitor can zoom on the page. Setting to 1.0 does not zoom.
• maximum-scale: The maximum amount the visitor can zoom on the page. Setting to 1.0 does not zoom.
• user-scalable: Allows the device to zoom in and out. Values are yes or no.

有关视口元元素的正式信息可以在 CSS设备适应性 草稿。

Official information about the viewport meta element can be found in the CSS Device Adaptation draft.

允许页面上的 1.00 的最小缩放和 2.00 的最大缩放，设置 minimum-scale = 1.00 和最大比例= 2.00 ：

To allow minimum zoom of 1.00 and maximum zoom of 2.00 on the page, set minimum-scale=1.00 and 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 ：

To disallow any zoom on the page, set the scales to 1.00 each and 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％保证您可以限制最小和最大边界。

Although this feature is supported across a wide range of mobile platforms, it's not a 100% guarantee, that you can limit the minimum and maximum boundaries.

有也是CSS规则 > CSS设备适配 ，但是根据 caniuse.com 和 MDN 。但是，当浏览器供应商将根据草案实现该功能时，您将能够使用 min-zoom 和<$ c确定样式表中的缩放边界$ c> max-zoom 属性，例如：

There is also the CSS at-rule @viewport in the CSS Device Adaptation, but its support is currently low according to caniuse.com and MDN. However, when the browser vendors will implement the feature according to the draft, you'll be able to determine the zoom boundaries in your stylesheet using the min-zoom and max-zoom properties, e.g.:

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

---

旁注，如果您要使用JavaScript检测缩放级别，请查看 此帖子 以获取更多详细信息。

这篇关于有没有一种方法可以指定浏览器的最小和最大缩放级别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！