Zoom body browser

Question

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?

Read this link and it can help you: https://stackoverflow.com/a/73590875/18194209 — AyobKafrashian, Sep 03 '22 at 08:54
Read this link and it can help you: https://stackoverflow.com/a/73590875/18194209 — AyobKafrashian, Sep 03 '22 at 09:06

Pavlo · Accepted Answer · 2020-01-02T13:39:41.087

6

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))`;

edited Jan 02 '20 at 13:39

answered Sep 17 '13 at 10:59

Pavlo

43,301
14
77
113

I add

function ZoomScreen200() {
 document.body.style.webkitTransform ='150%'         // Chrome, Opera, Safari
   document.body.style.msTransform = '150%'          // IE 9
   document.body.style.transform = 'scale(1.5)';
  }

but is not work chrome,safari and ie – titi Sep 17 '13 at 11:43

Thank you and how I can do to replace the four A + by A + and A- ? – titi Sep 17 '13 at 15:59
I would name them 100%, 150%, 200% and 250% to keep it simple. – Pavlo Sep 17 '13 at 16:10
Sorry for my english but I want input and not a http://jsfiddle.net/titi72/gHdPT/7/ how? – titi Sep 17 '13 at 16:18
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. – Pavlo Sep 18 '13 at 07:23
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. – Ags1 Jan 02 '20 at 11:50
@Ags1 you are correct, I've updated the answer accordingly. Thanks! – Pavlo Jan 02 '20 at 13:40

user1329482 · Answer 2 · 2013-09-17T11:10:49.917

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. :)

score 1 · Answer 3 · answered Oct 22 '20 at 01:31

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>

Zoom body browser

3 Answers3

Linked

Related