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

来源：互联网发布：linux ntpclient 编辑：程序博客网时间：2024/06/06 06:36

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

滚动条的div（也就是overflow:scroll），利用offsetWidth-clientWidth得到滚动条的宽度，再利用

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

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

function setBodyWidth(){var barWidthHelper=document.createElement('div');barWidthHelper.style.cssText="overflow:scroll; width:100px; height:100px;";document.body.appendChild(barWidthHelper);var barWidth=barWidthHelper.offsetWidth-barWidthHelper.clientWidth;document.body.removeChild(barWidthHelper);var bodyWidth=window.screen.availWidth-barWidth;return bodyWidth;}$(document).ready(function(){var bodyWidth=setBodyWidth()+"px";//document.body.style.width=bodyWidth;$("body").css("width",bodyWidth);});

顺便提一下clientWidth与offsetWidh的示意图

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

0 0