CSS - Adjust viewport zoom based on media queries

I have a website that I need to scale for different screen resolutions. So I decided to use media queries to change the zoom level based on screen resolution like so:

@media screen and (max-width: 1366px) {
  html {
    -moz-transform: scale(0.75, 0.75);
    zoom: 0.75;
    zoom: 75%;
  }
}
@media screen and (max-width: 1024px) {
  html {
    -moz-transform: scale(0.75, 0.75);
    zoom: 0.75;
    zoom: 75%;
  }
}

The results are as follows:

1. 10920x1080 resolution (No zoom. This is the intended scale that I need to replicate for other screen sizes)

2. 1366x768 resolution (Without media queries and zoom)

3. 1366x768 resolution (With media queries and 75% zoom css applied)

I achieved the required scaling with the media queries and the zoom combination but the problem here is the viewport does not scale accordingly and remains at the original level. (refer image 3. Notice the awkward white space at the bottom, outside of the viewport). If I change the window zoom using Ctrl + the view port adjusts accordingly.

How can I fix this?