Question

87

Zoom body browser

rated 0 times [ 94] [ 7] / answers: 1 / hits: 27676 / 11 Years ago, tue, september 17, 2013, 12:00:00

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?

Answers

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

shantelc

Add To Favorites

Follow

Total Points: 737

Total Questions: 120

Total Answers: 104

Location: Nicaragua

Member since Tue, Dec 8, 2020

4 Years ago

answered 11 Years ago piper · Accepted Answer

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