窗口縮放導致頁面排版錯亂的解決方法

原文鏈接：https://blog.csdn.net/xiongqiangwin1314/article/details/47864653

簡單的說就是設置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);
	}
);

原文鏈接：https://blog.csdn.net/xiongqiangwin1314/article/details/47864653