谁来控制应该与所有跨平台浏览器一起使用的浏览器级别缩放

Question

我正在寻找 JS 脚本来控制浏览器的缩放。

我试过 "document.body.style.zoom"，但这不适用于 Firefox。

谢谢。

Answer 1

幸运的是，无法通过 JavaScript 控制浏览器的缩放级别。这是一个 user-controlled 设置。^[1]

zoom CSS property 确实做了类似的事情 - 不仅缩放元素而且还缩放它的呈现大小，影响页面的布局。但是，与更改浏览器的缩放级别不同，zoom 属性不会影响媒体查询（在 Chrome 上测试），因此即使应用于 <html> 或 <body> 元素的结果可能与更改浏览器的缩放比例不同。另一个问题是 zoom 属性不标准且不受支持 cross-browsers.

另一种方法是应用 transform: scale(2); 或 transform: scale(0.5); 之类的转换。然而，转换只会在视觉上改变元素，而不是渲染的大小，所以你也需要处理它。以下代码似乎合理地模拟了 50% 的缩放级别：

:root {
    width: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
}

^[1] 可以通过浏览器扩展特权JS来控制，但那是不可能的。还有一个 <meta> tag setting 控制缩放级别，但它仅适用于智能手机，也可以通过浏览器设置覆盖。

谁来控制应该与所有跨平台浏览器一起使用的浏览器级别缩放

Who to control browser level zoom that should work with all cross platform browser

javascript

browser

firefox

dom