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

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

window.screen.availHeight與window.screen.height的區別就是一個任務欄高度的區別。