Looking to make my website compatible across various screen resolutions, I turned to media queries to adjust the zoom level based on different screen sizes like this:
@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 outcomes were as follows:
1. 10920x1080 resolution (No zoom applied, original intended scale) https://i.sstatic.net/YMcvn.png
2. 1366x768 resolution (No zoom or media queries) https://i.sstatic.net/GeMvY.png
3. 1366x768 resolution (Media queries with 75% zoom applied) https://i.sstatic.net/3KMhu.png
While the desired scaling was achieved using media queries and zoom, the issue arises with the viewport not adjusting accordingly and remaining at its original level (as seen in image 3 with white space outside of the viewport). Adjusting the window zoom with Ctrl + does align the viewport properly.
Any suggestions on how to resolve this problem?