javascript - HTML full page zoom depending on screen resolution - Stack Overflow

admin管理员组

文章数量:1291214

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

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

• javascript
• html
• css
• zooming

Share Improve this question Follow edited Mar 27, 2015 at 13:10 shadow 22.3k55 gold badges6565 silver badges7979 bronze badges asked Mar 27, 2015 at 12:39 AGOSDIZAJNAGOSDIZAJN 2311 gold badge11 silver badge33 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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

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 monly 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!

本文标签： javascriptHTML full page zoom depending on screen resolutionStack Overflow