Question

149

HTML full page zoom depending on screen resolution

rated 0 times [ 156] [ 7] / answers: 1 / hits: 15779 / 9 Years ago, fri, march 27, 2015, 12:00:00

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

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

miles

Add To Favorites

Follow

Total Points: 256

Total Questions: 111

Total Answers: 104

Location: Benin

Member since Fri, Mar 24, 2023

1 Year ago

miles questions

1 TypeError: Cannot read property 'then' of undefined Jest and Nest

Sun, Jan 30, 22, 00:00, 2 Years ago

1 Example: Doughnut | Error: Uncaught ReferenceError: Utils is not defined

Tue, Apr 27, 21, 00:00, 3 Years ago

1 How to block typing e and - characters in React Hook Form input?

Fri, Apr 9, 21, 00:00, 3 Years ago

1 Environment variables in svelte + rollup

Mon, Jun 29, 20, 00:00, 4 Years ago

1 How to calculate the time left in days, hours, minutes, and seconds left to reach certain day?

Mon, Jun 22, 20, 00:00, 4 Years ago

View All

answered 9 Years ago annalise · Accepted Answer

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