Zoom身体浏览器

Question

Zoom身体浏览器

3

我希望添加一个网站按钮，用于放大和缩小。我希望所有的内容都可以被放大。所以我创建了这段代码。

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

它可以在Chrome、Internet Explorer和Safari上运行，但不能在Firefox和Opera上运行。为什么？

- titi

如何在JavaScript中集成我的代码？ - titi

阅读此链接，它可以帮助您：https://dev59.com/0WsMtIcB2Jgan1zn2eyU#73590875 - AyobKafrashian

阅读此链接可以帮助您：https://dev59.com/0WsMtIcB2Jgan1zn2eyU#73590875 - AyobKafrashian

3个回答

1

请看http://www.browsersupport.net/CSS/zoom。在Firefox和Opera中，我通常无法使其正常工作，最直接的解释是这些浏览器尚未实现对它的支持（Firefox 23.0.1在链接网站中通过了其中一个测试；Opera 12.16均未通过）。需要注意的是，符合规范的页面应该有元素，样式也应该写在其中。我猜您可能是匆忙撰写而忘记了元素。 :)

- user1329482

1

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

最佳解决方案是使用 zoom: 50%

我用 JavaScript 制作了此示例，您可以测试并根据自己的喜好进行更改。

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>

- SystemX

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pavlo · Accepted Answer

zoom 是一个非标准属性，在Firefox中未被实现，最接近的跨浏览器属性是 transform （演示）:

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

然而，效果与应用 zoom 不同：父级上下文（例如宽度、高度）将不会更新。如果这是你的意图，你可以考虑在选定属性上使用 calc() 和一个乘数：

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