Firefox scale down entire web page

Question

Note: There are similar questions (and may be outdated) which do not address the Firefox issue.

I'm using CSS3 to scale down an entire web page by 50%.

@media screen and (max-width: 320px) {

  body {
    -moz-transform: scale(0.5); /* Moz-browsers */
    zoom: 0.5; /* Other non-webkit browsers */ 
  }

}

This works fine in Chrome but Firefox scales it down seemingly 2 times horizontally and vertically.

Is there a new cross-browser solution for properly scaling down?

Answer 1

Cross browser CSS should look like this (IE from ver. 9)

The code is tested in FF 45.0.1 and works fine.

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>