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>