Trying to get a website to zoom 120% when screen resolution is greater than 1600px

Question

I'm working on an website, and someone asked me if it was possible to zoom the entire website when someone has a screen width of 1600px or greater.

Now I've tried something with css3 and media queries, and I've read a lot on the internet, but I can't seem to get it to work.

This is the media query I've created in the CSS.

@media screen and (min-width:1600px) {
* {
    zoom: 500%;
}

Anybody got an idea?

Answer 1

Try this:

@media screen and (min-width: 1600px) {
  body {
    /* webkit browsers */
    zoom: 120%;
    /* moz browsers , since there is no support to "zoom" */
    -moz-transform: scale(1.2);
    -moz-transform-origin: 0 0
  }
}

here is a snippet:

@media screen and (min-width: 1600px) {
  body {
    /* webkit browsers */
    zoom: 120%;
    /* moz browsers , since there is no support to "zoom" */
    -moz-transform: scale(1.2);
    -moz-transform-origin: 0 0
  }
}

<div>this is going to be BIG when width is minimum 1600px</div>