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>