如何在 Firefox 上使用 Javascript 对元素设置缩放？

Question

我可以使用 zoom

在 Chrome 上更改页面元素

document.getElementById("pane-side").style.zoom = 0.5

看起来 Firefox 不支持 zoom，当我运行相同的代码时没有任何反应。

我正在搜索如何在 Firefox 上使用 zoom，我得到了这个代码：

document.getElementById("pane-side").style["-moz-transform"] = "scale(0.5)"

但是结果不是我所期望的：

我正在尝试像 Chrome 那样缩小元素，有什么建议吗？

-编辑- 我要放大的元素来自页面 web.whatsapp.com，当您在搜索中键入内容时，该面板会显示一些联系人（例如 chrome 照片）。

Answer 1

这对你有用吗？

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;

Answer 2

-moz-transform 和 transform 都应该在 FF 中得到支持。

这可能是因为 zoom 和 scale 之间的差异。

zoom 应用于预渲染并更改元素的布局大小。 transform 应用 post-render 并且不更改布局大小

查看此内容的最简单方法是使用相对于固定元素的 div 大小。在 zoom 上，div 内的所有内容都会缩放 in/out，但 div 保持不变在 scale 上，所有 'zooms' in/out，包括 div

Answer 3

您可以使用 CSS 变量试试这个

document.getElementById("pane-side").style.setProperty('--zoom', '0.5');

        
*{
    transform: scale(var(--zoom));
}

<h1 id="pane-side" >Firefox</h1>

Answer 4

我希望您不会将此 CSS 属性用于生产中的网站，属性 zoom 是非标准 CSS 属性，起源于 IE，由在 Microsoft 工作的 Rossen Atanassov 于 2015 年 5 月非正式提出。使用它是不安全的，因为它不适用于所有浏览器（并且以我的拙见，可能不会实现）。不幸的是，此 CSS 属性未在 Firefox 浏览器中实现，因此您遇到了此问题。

我看到您已经尝试使用 transform: scale(); 来代替，屏幕截图的差异是由于 zoom 影响元素的布局大小，而 transform: scale(); 不会。

您可以尝试使用 CSS at-rule @viewport，但请记住，这个规则也被弃用了（在 2020 年，这里有详细信息：https://github.com/w3c/csswg-drafts/issues/4766）并且可能不会'也不能在 Firefox 中工作。在您的 CSS 文件中：

@viewport {
  zoom: 1
}

1 或 100% 的缩放系数对应于无缩放。较大的值放大。较小的值缩小。

也就是说，您也可以尝试将目标元素的字体大小设置得更大（以获得放大效果）。如果这还不够，您可以尝试在这些属性之间找到良好的平衡。我将执行可能会放大所有字体大小的 CSS 示例：

body {
   transform: scale(1.5);
   font-size: 150%; // or any other value that is bigger than the computed value
   padding: 20%; // optional spacing if some text is not visible because of the transform scale
}

Answer 5

zoom FireFox 不支持。

下面的解决方案应该会如您所愿，只是根据您的需要调整数字：

document.getElementById("pane-side").style.transform = "scale(0.5)";
document.getElementById("pane-side").style.transformOrigin = "left top";
document.getElementById("pane-side").style.width = "795px";
document.getElementById("pane-side").style.minHeight = "1700px";
document.getElementById("pane-side").style.alignSelf = "flex-start";

或CSS版本：

#pane-side {
    transform: scale(0.5);
    transform-origin: left top;
    width: 795px;
    min-height: 1700px;
    align-self: flex-start;
}

或者最终 <style> 元素添加了 JS:

var style = document.createElement('style');
style.innerHTML = `
    #pane-side {
        transform: scale(0.5);
        transform-origin: left top;
        width: 795px;
        min-height: 1700px;
        align-self: flex-start;
    }
`;
document.head.appendChild(style);

如何在 Firefox 上使用 Javascript 对元素设置缩放？

How to set zoom on a element using Javascript on Firefox?

html

javascript

browser

firefox

zooming