变倍体浏览器 [英] Zoom body browser
本文介绍了变倍体浏览器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想补充我的网站按钮，A +和A-放大。
我希望所有的身体是grossise
所以我创造了这个code
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>
它适用于Chrome，IE浏览器，Safari浏览器而不是在Firefox和Opera。为什么呢？
It works on Chrome, Internet Explorer, Safari but not on Firefox and Opera. Why?
推荐答案
缩放是一个非标准的属性，使用变换代替（演示）：
zoom is a non-standard property, use transform instead (demo):
document.body.style.webkitTransform = // Chrome, Opera, Safari
document.body.style.msTransform = // IE 9
document.body.style.transform = 'scale(2)';
这篇关于变倍体浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
