窗口缩放导致页面排版错乱的解决方法
简单的说就是设置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的区别就是一个任务栏高度的区别。
感谢:https://blog.csdn.net/xiongqiangwin1314/article/details/47864653?utm_source=blogkpcl15