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应如下所示（来自第9版的IE）

代码在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缩小整个网页

1 个答案: