javascript - 防止缩放跨浏览器

Question

对于类似 map 的工具，我想禁用浏览器缩放功能。 (我知道这通常不是一个好主意，但对于某些特定网站来说，这是必需的)。

我通过听键盘快捷键 CTRL +/CTRL - 并添加 e.preventDefault() 成功地做到了这一点， ETC。但这并不能阻止从浏览器的“缩放”菜单更改缩放。

我试过:

• 使用 CSS:zoom: reset;它适用于 Chrome(请参阅 this page for a working example)，但在 Firefox 上根本不起作用。

• 在各种问题/答案中，我还发现了

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  但这似乎只适用于移动设备。

---

如何防止跨浏览器缩放？

Answer 1

我还没有真正找到一个“权威”的答案，意思是浏览器开发人员的明确声明。但是，我发现的所有类似问题的答案(如 this one 或 that one)都表明了同样的事情——浏览器的缩放功能是为了用户的利益而存在的，而某些浏览器(如 Firefox)根本不允许你，作为网站创建者，让他们远离这个选择。

---

This documentation可能会阐明为什么允许作者禁用缩放在移动设备上可能是个好主意，但在台式机上不是。

简而言之，如果您知道移动设备计算出的自动缩放不合适，您可能需要阻止移动设备最初自动缩放您的网站。 在台式机上，没有自动缩放功能，因此当用户访问您的网站时，他们看到的内容与预期完全一致。如果他们随后决定需要缩放页面，则没有让您阻止他们这样做的充分理由。

---

至于您列出的解决方案:

• zoom是非标准属性not supported by Firefox , 和
• <meta name="viewport">只关注布局视口(viewport) 和视觉视口(viewport) 为not the same thing 的设备，即移动设备。