頁面動態調整大小

我是JavaScript的新手，但我正在努力學習。出於這個原因，我想嘗試做到這一點，而不訴諸於jQuery。頁面動態調整大小

我想加載一個頁面，根據瀏覽器的高度和寬度動態調整內容的大小。我目前有兩個代碼迭代，一個在內容div中，另一個在內容中更簡單，沒有。

首先，尋找沒有圖像的人。從body標籤中的onload事件中調用winSize或者在HTML底部的腳本標籤內部似乎可以在設置樣式之前確定scrollHeight/Width，但是會用內容div的黑色填充整個窗口，而不是而不是將它的寬度設置爲704px，因爲腳本確定它應該是。在腳本頭文件中使用document.body.onload來調用winSize導致null scrollWidth/Height，並只顯示灰色背景。

爲相應的代碼表示如下：

<style> 
    body { 
     padding:0px; 
     background-color: #808080; 
    } 
    div { 
     position:absolute; 
    } 
</style> 
<script type="text/javascript"> 
    bArat=3/2; 
    bH1=0; 
    bW1=0; 
    bX1=0; 
    bY1=0; 

    function winSize(){ 
     winW=document.body.scrollWidth; 
     winH=document.body.scrollHeight; 
     _style(); 
    } 

    function _style(){ 
     bH1=winH; 
     bW1=bH1/bArat; 
     bX1=(winW/2)-(bW1/2); 
     document.getElementById("gutters").style.left=bX1; 
     document.getElementById("gutters").style.top=bY1; 
     document.getElementById("gutters").style.height=bH1; 
     document.getElementById("gutters").style.width=bW1; 
     document.getElementById("gutters").style.backgroundColor="black"; 
     document.body.style.backgroundColor="black"; 
    } 

    //document.body.onload=winSize(); 
</script> 
</head> 
<body> 
    <div id="gutters"> 
    </div> 
    <script> 
    //winSize(); 
    </script> 
</body> 
</html>

其次，在該腳本的更復雜的版本，包括容納一個img「水槽」內一個div（即將多個，一旦因爲這個問題已經解決了），除了加載的時候，幾乎所有的工作都很好，它不會加載樣式（在Chrome中）。但是，它會在刷新時加載樣式，或者如果我在onload觸發器上設置了50ms的延遲。我認爲這是因爲Chrome（和Safari？）在加載html之後但在圖像本身被渲染之前觸發onload事件，因此該函數無法確定尚未真正完成加載的主體的高度和寬度。

在這第二個腳本上面的功能：

function winSize(){ 
    winW=document.body.scrollWidth; 
    winH=document.body.scrollHeight; 
    _style(); 
}

不會在所有的工作。沒有定義winH或winW。

但功能從http://www.javascripter.net/faq/browserw.htm

function winSize(){ 
    if (document.body && document.body.offsetWidth) { 
     winW = document.body.offsetWidth; 
     winH = document.body.offsetHeight; 
    } 
    if (document.compatMode=='CSS1Compat' && 
    document.documentElement && 
    document.documentElement.offsetWidth) { 
     winW = document.documentElement.offsetWidth; 
     winH = document.documentElement.offsetHeight; 
    } 
    if (window.innerWidth && window.innerHeight) { 
     winW = window.innerWidth; 
     winH = window.innerHeight; 
    } 
}

工作陷入僵局，如上文所述：」 ......在加載時不會加載樣式（在Chrome）它，然而，加載上的樣式。刷新「。如果我在第一個腳本中運行第二個winSize函數，它將返回錯誤「Can not read property'style of null」。

我更喜歡第一功能爲它的簡潔和（根據W3schools.com）與object.scrollWidth超過window.innerWidth更好的跨瀏覽器兼容性，但很明顯，一個或兩個在一些上下文中被破壞。

我的問題是，按重要性排序：

中，第二腳本，我怎麼能得到「使用winsize」功能來運行圖像已滿載後？（如果這是問題）
爲什麼這兩個腳本在以相同的方式實現時對這兩個函數的反應有着截然不同的反應。
什麼會修復我提出的第一個腳本 - 第一個內容div「排水溝」填滿整個屏幕而不是製作矩形。
爲什麼要在body標籤中加載一個onload事件，但將document.body.onload放在頭部的腳本中卻不行。

對不起，有這麼長的一個問題 - 還有很多問題，但我找不到解決問題的方法。我會很感激任何幫助，並永遠讚揚那些能夠幫助我圍繞這一點的人。

來源

2012-05-21 Justin

1）在'..style.left = bX1 +「px」'2）中添加'+「px」'你的尺寸。2）你現在在哪裏調用winsize？我期望'window.onload = function（）{winSize（）}' – mplungjan

3）是我的一個愚蠢的錯誤。我剛剛找到'\t document.body.style.backgroundColor =「black」; '。不知道如何，或者爲什麼它在那裏 - 但它不再是。 – Justin

Thanks mplungjan！幫助添加'... + px'並使用'window.onload'。我曾嘗試用'document.onload'調用它。似乎沒有必要將匿名函數稱爲內部函數，請問爲什麼你提出這個函數？唯一的問題是，它似乎是檢索scrollheight /寬度爲246 x 341，在這種情況下，它應該是1078 x 950.我解決了問題，使用'window.onresize = winSize' – Justin

爲什麼不只是用％指定尺寸並讓瀏覽器去做。可能你有一些非常具體的要求？（簡稱）

來源

2012-05-21 06:02:14 user1365013

我設置了8個窗格，4h x 2w的頁面，並對其進行動畫製作，以便在整個頁面上單擊一個窗格時可以放大。然後用戶具有可靠性懸停在外圍窗格上，使它們成爲中心。
我無法定義百分比高度和寬度的原因是因爲我沒有關於用戶屏幕長寬比的參考框架。如果我想讓我的容器div高到0.75的寬度，我不知道如何定義它 – Justin

頁面動態調整大小

回答

相關問題