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

簡單的說就是設置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的區別就是一個任務欄高度的區別。