Zoom body browser

javascript css function browser zooming

23,884

Solution 1

zoom is a non-standard property that has not been implemented by Firefox, the closest cross-browser property is transform (demo):

document.body.style.transform = 'scale(2)';

The effect, however, will be different from applying zoom: parent context (e.g. width, height) will not be updated. If that's your intent, you may want to consider using calc() and a multiplier on selected properties:

document.body.style['--zoom'] = '2';
document.body.style.fontSize = 'calc(16px * var(--zoom))`;

Solution 2

https://stackoverflow.com/a/64473943/3534015

best solution is using zoom: 50%

i made this example with javascript, you can test it and change it as you like

var zoomediv = document.getElementById('zoomediv')

var zoomin_button = document.querySelector('#zoomin')
zoomin_button.addEventListener('click', function(){
  zoomediv.style.zoom = '125%'
})

var zoomout_button = document.querySelector('#zoomout')
zoomout_button.addEventListener('click', () => {
  zoomediv.style.zoom = '75%'
})

div {
  background: #f0f0f0;
  
  border: 1px solid #e0e0e0;
  width: fit-content;
  padding: 1rem;
  margin-bottom: 1rem;
}

button {
  padding: 0 3rem;
}

<div id="zoomediv">
  <h1>
    Title
  </h1>
  <p>
    this is a paragraph
  </p>
</div>

<button id="zoomin">
  <h1>
    +
  </h1>
</button>

<button id="zoomout">
  <h1>
    -
  </h1>
</button>

Solution 3

Have a look at http://www.browsersupport.net/CSS/zoom. I wasn't able to make it work (generally) in Firefox or Opera, and the most straightforward explanation is that those browsers haven't implemented support for it. (Firefox 23.0.1 passed one of the tests at the linked site; Opera 12.16 passed neither.)

It's not what you wrote--it's that the browsers you mention aren't ready for it yet. (Not surprising--even though you'll find site that tell you zoom is in the spec, I can't find it listed anywhere in the actual w3c documents. Maybe after more caffeine....)

That being said, remember that a compliant page will have a element and that's where the styles go. I assume this was a quick dash-off and you forgot the head element. :)

23,884

Author by

titi

Updated on July 09, 2022

Comments

titi almost 2 years

I would add my site buttons A + and A-to zoom. I wish that all the body is grossise So I created this code

<html>
<body>
    <style>
    .container{width: 800px;background: #000;}
    p{color:#fff;}
    a { color: #FFCC00;}
    </style>
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui, sunt, totam quaerat repudiandae dignissimos maxime et perspiciatis aperiam doloremque eaque eum explicabo ullam deleniti sed adipisci obcaecati fuga similique.</p>
<script type="text/javascript">
function ZoomScreen100() {
document.body.style.zoom="100%"
 }
function ZoomScreen200() {
document.body.style.zoom="200%"
 } 
function ZoomScreen300() {
document.body.style.zoom="300%"
}
function ZoomScreen400() {
document.body.style.zoom="400%"
document.body.style.zoom="400%"
}
</script>
<a href="#" onclick="ZoomScreen100()">A+</a>
<a href="#" onclick="ZoomScreen200()">A+</a>
<a href="#" onclick="ZoomScreen300()">A+</a>
<a href="#" onclick="ZoomScreen400()">A+</a>
</body>

It works on Chrome, Internet Explorer, Safari but not on Firefox and Opera. Why?

titi over 10 years

I add <pre>function ZoomScreen200() { document.body.style.webkitTransform ='150%' // Chrome, Opera, Safari document.body.style.msTransform = '150%' // IE 9 document.body.style.transform = 'scale(1.5)'; }</pre> but is not work chrome,safari and ie
titi over 10 years

Thank you and how I can do to replace the four A + by A + and A- ?
Pavlo over 10 years

I would name them 100%, 150%, 200% and 250% to keep it simple.
titi over 10 years

Sorry for my english but I want input and not a jsfiddle.net/titi72/gHdPT/7 how?
Pavlo over 10 years

The original question is about zoom property. If you are satisfied with my answer, mark it as accepted. If you have more to ask, create a new question.
Ags1 over 4 years

The behavior of zoom and transform are very different. For example, transforming bigger makes a site spanning the browser window wider than the window, while zoom reflows the site to fiIl the window, just with bigger text. If you want the behavior of zoom, then tranform is not the answer.
Pavlo over 4 years

@Ags1 you are correct, I've updated the answer accordingly. Thanks!