模拟浏览器放大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