Firefox 缩小整个网页

Question

注意：有类似的问题（可能已过时）未解决 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 倍。

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

Answer 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>

Firefox 缩小整个网页

Firefox scale down entire web page

html

css

scale

zooming