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>