JS控制浏览器网页内容的百分比缩放

Question

用js，或者jQuery达到控制浏览器（IE10）网页内容缩放的效果，效果跟Ctrl +或者Ctrl -一样，但是网页内容中的顶部导航条仍然要使其保持100%；zoom或者
$("body").css({"transform":"scale("0.8")","transform-origin":"50% 0"})虽然实现了缩小效果，但是顶部导航条给缩短了，有解决办法吗？

Answer 1

你可以让顶部导航栏和其他部分分处不同的层，然后你只需要对其他部分所处的层进行缩放处理，导航栏不动，这样就实现你的目的了。比如：
<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；但是这样，有的画面内容比较多时就看不到了。

追答

页面的缩放本来就不是一个正常网站所需要的正常功能，你肯定是有什么特殊需要才这么做的吧？既然这样，那你就不能要求百分百完美了

Answer 2

很简单，给你的导航条设置一个最小宽度限制nim-width:100%;这样顶部导航就不会改变宽度了

Answer 3

我有个方法，js我就不写了，说下思路 zoom 来设置页面的缩放，比如 body{zoom:0.8;} 就是以0.8的比例缩小页面， var h = document.body.clientWidth; //获得屏幕宽度 document.getElementsByTagName('body').style.zoom=1920/h; 我没有试过，你自己试试看本回答被网友采纳