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

问题描述

我可以使用 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 照片上），该面板会显示一些联系人。

解决方法

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

或者最终用 JS 添加 <style> 元素：

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

这对你有用吗？

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。在 zoom 上，div 内的所有内容都会放大/缩小，但 div 保持不变在 scale 上，所有内容都会“放大”/缩小，包括 div

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

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

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

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

我希望您不要将这个 CSS 属性用于生产中的网站， zoom 属性是一个非标准的 CSS 属性，起源于 IE，由在微软工作的 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
}

browser firefox html javascript zooming