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

我可以使用

zoom

document.getElementById（“窗格侧”）.style.zoom=0.5

看起来Firefox不支持缩放，当我运行相同的代码时，什么也没有发生

我正在搜索如何在Firefox上使用

zoom

，我得到了以下代码：

document.getElementById（“窗格侧”）.style[“-moz-transform”]=“比例（0.5）”

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

我正试图缩小Chrome上的元素，有什么建议吗

-编辑-

---

我试图放大的元素来自网页

web.whatsapp.com

，当您在搜索中键入内容（如chrome照片）时，该面板会显示一些联系人。

这对您有效吗

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

---

FF中应支持

-moz transform

和

transform

这可能是因为

zoom

和

scale

之间存在差异

zoom

在预渲染时应用，并更改元素的布局大小。

transform

在渲染后应用，不会更改布局大小

最简单的方法是使用相对于固定元素大小的div。 在缩放时，div内的所有内容都将放大/缩小，但div保持不变

---

在

scale

上，所有内容都“放大/缩小”，包括div

您可以使用CSS变量尝试以下操作

document.getElementById（“窗格侧”）.style.setProperty（'--zoom'，0.5'）

*{
变换：缩放（var（--zoom））；
}
Firefox
我希望您没有在生产中的网站上使用此CSS属性，
zoom属性是一种非标准CSS属性，起源于IE，由微软的Rossen Atanassov于2015年5月非正式提出。
使用它是不安全的，因为它不适用于所有浏览器（我的拙见是，可能不会实现）。不幸的是，这个CSS属性没有在Firefox浏览器中实现，因此您遇到了这个问题

我看到您已经尝试使用transform:scale（）；相反
屏幕截图中的差异是因为缩放影响元素的布局大小，而transform:scale（）；没有

您可以尝试在rule@viewport使用CSS，但请记住这一个也被弃用了（在2020年，这里是详细信息：），并且可能在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
}

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;
}

或者最终使用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);

它只是style.transform而不是moz transform我使用style.transform得到了相同的结果；变换原点：0；正如在这个问题中所描述的：我不确定如何使用它，我尝试了：
document.getElementById（“窗格侧”）.zoom=0.5并且没有改变任何内容，同样
document.getElementById（“窗格侧”）.style[“-moz transform”]=“scale（0.5,0.5）”
的操作与我发布的图片上的操作相同
document.getElementById（“窗格侧”）.style.setProperty（'--zoom'，0.5'）返回未定义，另一个代码我不知道如何使用，我正在尝试更改一个不属于我的页面元素的缩放。您必须添加csshow我添加css吗？
*{transform:scale（var（--zoom））；}
将此代码添加到
和
之间，我这样做了，但得到的结果与使用
document.getElementById（“窗格侧”）.style[“-moz transform”]=“scale（0.5）”
，我尝试缩放的页面是web.whatsapp.com，搜索一个号码时显示联系人的面板。