Question

我会添加我的网站按钮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。为什么呢？

Answer 1

zoom是非标准媒体资源，请使用transform代替demo）：

document.body.style.webkitTransform =         // Chrome, Opera, Safari
  document.body.style.msTransform =           // IE 9
  document.body.style.transform = 'scale(2)';

Answer 2

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>

Answer 3

看看http://www.browsersupport.net/CSS/zoom。我无法让它（通常）在Firefox或Opera中运行，最直接的解释是那些浏览器没有实现对它的支持。（Firefox 23.0.1在链接网站上通过了其中一项测试; Opera 12.16也未通过。）

这不是你写的 - 这就是你提到的浏览器还没准备好。（这并不奇怪 - 即使你会发现网站告诉你缩放是在规范中，我找不到它列在实际的w3c文件中的任何地方。也许更多的咖啡因....）

话虽如此，请记住，合规页面会有一个元素，而这就是样式所在的位置。我认为这是一个快速的冲刺，你忘了头元素。：）

放大身体浏览器

3 个答案: