欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

窗口缩放导致页面排版错乱的解决方法

程序员文章站 2022-03-20 21:09:34
简单的说就是设置body的宽度,那么如何动态的获取浏览器减去侧边滚动条之后的宽度,原理就是通过创建一个带有 滚动条的div(也就是overflow:scroll),利用offsetWidth-clientWidth得到滚动条的宽度,再利用 window.screen.availWidth减去滚动条的 ......

简单的说就是设置body的宽度,那么如何动态的获取浏览器减去侧边滚动条之后的宽度,原理就是通过创建一个带有

滚动条的div(也就是overflow:scroll),利用offsetwidth-clientwidth得到滚动条的宽度,再利用

window.screen.availwidth减去滚动条的宽度即可得到浏览器除了滚动条以外的宽度,body再设置该宽度,即可解决

缩放排版错乱的问题,代码展示如下
---------------------

 1 function setbodywidth(){
 2     var barwidthhelper=document.createelement('div');
 3     barwidthhelper.style.csstext="overflow:scroll; width:100px; height:100px;";
 4     document.body.appendchild(barwidthhelper);
 5     var barwidth=barwidthhelper.offsetwidth-barwidthhelper.clientwidth;
 6     document.body.removechild(barwidthhelper);
 7     var bodywidth=window.screen.availwidth-barwidth;
 8     return bodywidth;
 9 }
10             
11 $(document).ready(
12     function(){
13         var bodywidth=setbodywidth()+"px";
14         //document.body.style.width=bodywidth;
15         $("body").css("width",bodywidth);
16     }
17 );

window.screen.availheight与window.screen.height的区别就是一个任务栏高度的区别。