利用$(window).resize()實現窗口大小自適應寬度問題

© 版權聲明：本文為博主原創文章，轉載請注明出處

問題描述：利用iframe做頁面引入，用$(window).resize()作自適應；結果窗口變小時，利用$(window).width()獲取到的寬度總是小於瀏覽器寬度，在左邊留下17px寬度的白條。

　　代碼如下：

<iframe id="main-wrapper" name="main-wrapper" src="zkt.htm" frameborder="0" style="float: right;"></iframe>

// 自適應主頁面大小
$(window).resize(function () {
    
　　initSize();

}


// 初始化主頁面大小
function initSize() {

　　var screenHeight = $(window).height();// 窗口高度
　　var navHeight = $("#topNav").height();// 頂部導航欄高度
　　var contentHeight = screenHeight - navHeight;// 內容區域高度
　　var screenWidth = $(window).width();// 窗口寬度

　　$("#main-wrapper").width(screenWidth);// 設置內容區域寬度
　　$("#main-wrapper").css("margin-top", navHeight);// 設置內容區域margin-top
　　$("#main-wrapper").height(contentHeight);// 設置內容區域高度

}

問題分析：在頁面大小發生變化時，如果高度減小時，此時會出現滾動條，$(window).width()獲取的寬度為減去滾動條之后的寬度，又因為iframe默認靠右，因此左邊會出現空白。

解決方案：判斷當頁面高度減小時，將寬度設置為$(window).width()加上滾動條（默認17px）的寬度即可。

 

var initHeight = $(window).height() - $("#topNav").height();// 初始主頁面高度

// 自適應主頁面大小
$(window).resize(function () {
    
　　initSize();

}


// 初始化主頁面大小
function initSize() {

　　var screenHeight = $(window).height();// 窗口高度
　　var navHeight = $("#topNav").height();// 頂部導航欄高度
　　var contentHeight = screenHeight - navHeight;// 內容區域高度
　　var screenWidth = $(window).width();// 窗口寬度

　　if (initHeight > contentHeight) {// 初始高度大於現有高度，高度變小過程中會出現滾動條
　　　　screenWidth = screenWidth + 17;// 窗口寬度變為現有寬度+滾動條寬度
21 　　}
　　initHeight = contentHeight;// 將初始高度重置為現有高度

　　$("#main-wrapper").width(screenWidth);// 設置內容區域寬度
　　$("#main-wrapper").css("margin-top", navHeight);// 設置內容區域margin-top
　　$("#main-wrapper").height(contentHeight);// 設置內容區域高度

}