js网页缩放重置
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js网页缩放重置相关的知识，希望对你有一定的参考价值。
initial-scale=0.5, maximum-scale=1.2
不重新加载，不刷新页面的条件下，
求将缩放回复到初始值的js方法
多谢！
看看如下示例是否符合你的需求：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
divwidth: 30px;height: 100px;border: 1px solid #ccc;background: #999;
</style>
<body>
<div onmousewheel="bsadapt(this)"></div>
</body>
<script type="text/javascript">
function bsadapt(o)
var zoom = parseInt(o.style.zoom, 10)||100;
zoom += event.wheelDelta/12;
if(zoom > 0)
o.style.zoom = zoom+'%';
return false;
</script>
</html>
鼠标移动到区域，然后滚动滚动，可以放大、缩小div。想要放大或者缩小到固定大小的话，直接传递数值即可的！
有任何疑问，欢迎追问......
参考技术A crtl + ‘+’能够直接缩放当前网页。JS控制浏览器网页内容的百分比缩放
用js，或者jQuery达到控制浏览器（IE10）网页内容缩放的效果，效果跟Ctrl +或者Ctrl -一样，但是网页内容中的顶部导航条仍然要使其保持100%；zoom或者
$("body").css("transform":"scale("0.8")","transform-origin":"50% 0")虽然实现了缩小效果，但是顶部导航条给缩短了，有解决办法吗？
<div class=head>这是顶部导航栏</div>
<div class=body>这是其他主体部分</div>
然后js代码就可以这样：
$("div.body").css("transform":"scale(0.8)","transform-origin":"50% 0")追问
HTML会因为缩小导致出现一块空白，怎么控制body，html宽高都不能删掉。只能overflow：hidden；但是这样，有的画面内容比较多时就看不到了。
追答页面的缩放本来就不是一个正常网站所需要的正常功能，你肯定是有什么特殊需要才这么做的吧？既然这样，那你就不能要求百分百完美了
参考技术A 很简单，给你的导航条设置一个最小宽度限制nim-width:100%;这样顶部导航就不会改变宽度了 参考技术B 我有个方法，js我就不写了，说下思路 zoom 来设置页面的缩放，比如 bodyzoom:0.8; 就是以0.8的比例缩小页面， var h = document.body.clientWidth; //获得屏幕宽度 document.getElementsByTagName('body').style.zoom=1920/h; 我没有试过，你自己试试看以上是关于js网页缩放重置的主要内容，如果未能解决你的问题，请参考以下文章
在闪亮的应用程序中放置在 UiOutput 中时，缩放和重置控制器不起作用