对于类似地图的工具,我想 禁用浏览器缩放功能。 (我知道这通常是一个坏主意,但对于某些特定的网站,它是必需的)。
我通过听键盘快捷键 CTRL
+
/ CTRL
-
并添加 e.preventDefault()
等成功地做到了。 但这并不能阻止从浏览器的缩放菜单中更改缩放。
我试过了:
使用 CSS:
zoom: reset;
它适用于 Chrome(请参阅 此页面以获取工作示例),但它在 Firefox 上根本不起作用。在各种问题/答案中,我还发现
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
但这似乎仅适用于移动设备。
如何防止跨浏览器缩放?
原文由 Basj 发布,翻译遵循 CC BY-SA 4.0 许可协议
我还没有真正找到一个“权威”的答案,这意味着浏览器开发人员的明确声明。然而,我发现的所有类似问题的答案(比如 这个 或 那个)都暗示了同样的事情——浏览器的缩放功能是为了用户的利益而存在的,而一些浏览器(比如 Firefox)根本不允许你这样做,因为网站创建者,将此选项从他们手中夺走。
该文档 可能会阐明为什么允许作者禁用缩放在移动设备上可能是个好主意,但在台式机上却不是。
简而言之,如果您知道移动设备计算出的自动缩放是不合适的,您可能需要阻止移动设备最初自动缩放您的网站。 在台式机上,没有自动缩放功能,因此当用户访问您的网站时,他们看到的完全是原样。 如果他们随后决定需要缩放页面,则没有充分的理由让您阻止他们这样做。
至于您列出的解决方案:
zoom
是 Firefox 不支持 的非标准属性,并且<meta name="viewport">
只关注 布局视口 和 视觉视口 不是一回事的 设备,即移动设备。