CODEWITHSUNDEEP
javascripthtmlcsszooming
AGOSDIZAJN
AGOSDIZAJN

Reputation: 23

HTML full page zoom depending on screen resolution

I have a problem with displaying my html site on different monitors/resolutions. I was trying to to solve this problem with the following script, but it isn't working. How could I improve this?

if (width <= 1280 && height <= 720) {
  document.getElementById('html').style.zoom = '50%';
html {
	zoom: 100%;
}

Upvotes: 2

Views: 18596

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

You could scale the content without javascript, just using a mediaquery and a CSS3 transformation applied to the html element

@media screen and (max-width: 1280px) and (max-height: 720px) {
   html {
      transform: scale(.5);   
      // or simply zoom: 50%
   }
}

as a side note your code can't work because you're looking for an element with id="html", while you're trying to target the html element (that is document.documentElement or document.querySelector('html'))

Upvotes: 8

patoui2
patoui2

Reputation: 39

I believe this is more of a viewport and/or css media query issue. You shouldn't be trying to fix your pages look with javascript because it can be disabled. I would suggestion reading up on viewports Viewport Overview. The most commonly used paired tags are:

<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Those will help with resizing most of the content on the page based on the device width, other changes you'll have to manage more manually via css media queries, here is an example:

@media screen and (max-width: 300px) {
    body {
        width: 80%;
        font-size: 15px;
    }
}

The above corresponds to, at 300px or smaller change the width and font size.

I hope this helps!

Upvotes: -1

Related Questions