防止缩放跨浏览器 [英] Prevent zoom cross-browser

问题描述

对于类似地图的工具，我想停用浏览器缩放功能。 （我知道这通常是一个坏主意，但对于一些特定的网站，它是需要的）。

键盘快捷键 CTRL + / CTRL - 并添加 e.preventDefault / code>等。
但这并不妨碍从浏览器的缩放菜单更改缩放。

我尝试：




• 使用CSS： zoom：reset; 适用于Chrome（请参阅此网页以获取实用示例），但在Firefox中根本无法使用。

  viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1，user-scalable = no>
  
  $ b b

  但这似乎只适用于行动装置。

---

如何防止缩放跨浏览器？

解决方案

回答，意味着浏览器开发人员的清晰声明。但是，我找到的类似问题的所有答案（如此一或那一个）同样的事情 - 浏览器的缩放功能存在为用户的利益和一些浏览器（如火狐浏览器）根本不允许作为网站的创建者，让这个选项远离他们。

---

此文档可能揭示了为什么允许作者停用缩放在移动设备上可能是一个好主意，但不是在桌面上。

总之，可能需要防止移动设备初始自动缩放您的网站，如果您知道他们计算的自动缩放将是不适当的。 在桌面设备上，没有自动缩放功能，因此，当用户访问您的网站时，他们看到的内容与要显示的内容完全相同。如果他们决定需要缩放网页，

---

对于您列出的解决方案：

• 缩放是非标准属性不支持Firefox 和


• < meta name =viewport> 仅与其中布局视口和视觉视口的设备不一样，即移动设备。

For a map-like tool, I would like to disable the browser zooming feature. (I know that this is generally a bad idea, but for some specific website, it is needed).

I did it successfully by listening the keyboard shortcut CTRL + / CTRL - and adding e.preventDefault(), etc. But this doesn't prevent from changing the zoom from the browser's Zoom menu.

I tried:

• with CSS: zoom: reset; It works for Chrome (see this page for a working example) but it doesn't work at all on Firefox.

• in various questions/answers, I also found

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

  but this seems to work for mobile only.

---

How to prevent zooming cross-browser ?

解决方案

I haven't really found an "authoritative" answer, meaning a clear statement from browser developers. However, all answers to similar questions I've found (like this one or that one) suggest the same thing - the browser's zoom feature exists for the benefit of the users and some browsers (like Firefox) simply don't allow you, as a website creator, to take this option away from them.

---

This documentation might shed some light into why allowing authors to disable zoom might be a good idea on mobile devices, but not on desktops.

In short, you might need to prevent mobile devices from initially auto-zooming your website, if you know their calculated auto-zoom will be inappropriate. On desktops, there is no auto-zoom, so when users come to your website, they see it exactly as it was meant to be seen. If they then decide they need to zoom the page, there's no good reason to let you prevent them from doing so.

---

As for the solutions you've listed:

• zoom is a non-standard property not supported by Firefox, and
• <meta name="viewport"> is concerned only with devices on which layout viewport and visual viewport are not the same thing, i.e. mobile devices.

这篇关于防止缩放跨浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！