CODEWITHSUNDEEP
javascripthtmlcsszoomingresolution
Frans Bergström
Frans Bergström

Reputation: 65

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! :)

Upvotes: 2

Views: 4284

Answers (2)

Billy
Billy

Reputation: 2448

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>

Upvotes: 1

Atanu Saha
Atanu Saha

Reputation: 568

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%;
  }
}

Upvotes: 1

Related Questions