HTML全页面缩放取决于屏幕分辨率

Question

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

Answer 1

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') )

Answer 2

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!