3

我会添加我的站点按钮 A + 和 A- 来缩放。我希望所有的身体都是粗糙的所以我创建了这个代码

<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。为什么？

4

3 回答 3

6

zoom是Firefox 尚未实现的非标准属性，最接近的跨浏览器属性是transform（demo）：

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

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

document.body.style['--zoom'] = '2';
document.body.style.fontSize = 'calc(16px * var(--zoom))`;
于 2013-09-17T10:59:49.987 回答
1

看看http://www.browsersupport.net/CSS/zoom。我无法使其（通常）在 Firefox 或 Opera 中工作，最直接的解释是这些浏览器尚未实现对它的支持。（Firefox 23.0.1 通过了链接站点的一项测试；Opera 12.16 均未通过。）

这不是你写的——你提到的浏览器还没有准备好。（不足为奇——即使您会在规范中找到告诉您缩放的网站，但我在实际的 w3c 文档中的任何地方都找不到它。也许在更多的咖啡因之后......）

话虽如此，请记住，兼容的页面将有一个元素，这就是样式所在。我认为这是一个快速的冲刺，你忘记了头部元素。:)

于 2013-09-17T11:02:19.783 回答
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>

于 2020-10-22T01:31:41.803 回答