Zoom body browser

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

    .container{width: 800px;background: #000;}
    a { color: #FFCC00;}
    <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() {"100%"
function ZoomScreen200() {"200%"
function ZoomScreen300() {"300%"
function ZoomScreen400() {"400%""400%"
<a href="#" onclick="ZoomScreen100()">A+</a>
<a href="#" onclick="ZoomScreen200()">A+</a>
<a href="#" onclick="ZoomScreen300()">A+</a>
<a href="#" onclick="ZoomScreen400()">A+</a>

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


  • zoom is a non-standard property that has not been implemented by Firefox, the closest cross-browser property is transform (demo): = '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:['--zoom'] = '2'; = 'calc(16px * var(--zoom))`;