Zoom website depending on monitor resolution?

问题

I'm looking for a javascript to change the zoom of the website depending on the viwewers screen resolution. I made the website on my desktop with 1920x1080p :/

html { -moz-transform: scale(0.75, 0.75); zoom: 0.75; zoom: 75%; }

I got this in my css to zoom the website to my liking for MacBook (1280 x 800).

However I have no idea how to enable/disable it using javascript (if its possible?) and how to detect the resolution.

Any help is appriciated! :)

回答1:

Try this:

@media(max-device-width:1280px){
  html{
    -moz-transform: scale(0.75, 0.75);
    zoom: 0.75;
    zoom: 75%;
  }
}

@media(max-device-width:800px){
  html{
    -moz-transform: scale(0.50, 0.50);
    zoom: 0.50;
    zoom: 50%;
  }
}

回答2:

css @media queries will help you,don't need javascript.for example

@media screen and (max-width: 1280px) {
  html {
    -moz-transform: scale(0.75, 0.75);
    zoom: 0.75;
    zoom: 75%;
  }
}
@media screen and (max-width: 800px) {
  html {
    -moz-transform: scale(0.50, 0.50);
    zoom: 0.50;
    zoom: 50%;
  }
}

if you specifically want javascript then look at window screen object w3schools

 <script>alert("Screen Width: " + screen.width);</script>

来源：https://stackoverflow.com/questions/27908509/zoom-website-depending-on-monitor-resolution