窗口缩放导致页面排版错乱的解决方法
程序员文章站
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的区别就是一个任务栏高度的区别。
上一篇: linux 广播和组播
下一篇: loj#10078. 新年好(最短路)