在 CSS 中模拟浏览器缩放

Question

好吧，我已经尝试了我所知道的两种缩放方法：

zoom:2;

和...

transform:scale(2);

然而，虽然它们确实有效（某种程度上），但存在一个主要缺陷：JavaScript 鼠标事件被 ----ed。

我似乎无法弄清楚如何获取鼠标坐标，就好像页面没有缩放一样。

此外，我必须添加body{width:50%}以确保它不会导致巨大的水平滚动。

另一方面，如果我只是使用本机浏览器缩放来缩放页面，则结果是完美的。一切都正确显示，鼠标事件正常工作，主体保持其实际宽度等等。

有没有办法让这种自然的浏览器缩放在 CSS 中工作？如果没有，我应该使用哪种 JavaScript 来确保鼠标坐标正确“缩放”？

Answer 1

我不相信有一种方法可以以编程方式控制本机浏览器缩放。您可能会做的是使用 Javascript 通过 CSS 控制文档的缩放，同时跟踪当前缩放级别，然后使用当前缩放级别作为修改器过滤鼠标坐标。例如，如果缩放比例为 50%，则将鼠标坐标乘以 0.5 即可保持同步。

请注意，该zoom属性是 MSIE 专有的，尚未普遍采用，因此它可能不适用于所有浏览器：http://dev.w3.org/csswg/css-device-adapt/#the-lsquozoomrsquo-descriptor