Firefox 缩小整个网页

【问题标题】：Firefox scale down entire web pageFirefox 缩小整个网页
【发布时间】：2023-03-03 15:49:02
【问题描述】：

注意：有类似的问题（可能已经过时）没有解决 Firefox 问题。

我正在使用 CSS3 将整个网页缩小 50%。

@media screen and (max-width: 320px) {

  body {
    -moz-transform: scale(0.5); /* Moz-browsers */
    zoom: 0.5; /* Other non-webkit browsers */ 
  }

}

这在 Chrome 中运行良好，但 Firefox 将其水平和垂直缩小了 2 倍。

是否有新的跨浏览器解决方案可以正确缩小？

【问题讨论】：

标签： html css zooming scale

【解决方案1】：

跨浏览器 CSS 应如下所示（IE 版本 9）

代码在 FF 45.0.1 中经过测试，运行良好。

body {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);  
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}
div {
  width: 50vw;
  height: 50vh;
  background: red;
  font-size: 40px;
}

<div>
  Hello world - font size 40px
</div>

【讨论】：