JavaScript---手機端--頁面自適應

標籤：

在公司新學了一種頁面自適應的方式：

//等比縮放!(function(doc, win) {    var timer,        docEle = doc.documentElement,//擷取body        evt = "onorientationchange" in window ? "orientationchange" : "resize",//擷取手機旋轉事件        setFontSize = function() {            var width = docEle.getBoundingClientRect().width;            width && (docEle.style.fontSize = 20 * (width / 320) + "px");        };    win.addEventListener(evt, function() {        clearTimeout(timer);        timer = setTimeout(setFontSize, 300);    }, false);    doc.addEventListener("DOMContentLoaded", setFontSize, false);//為了相容fireFox，在所有DOM載入完畢後會執行這個事件}(document, window));

仔細一看，一堆東西都不明白，因此做了一些搜查，現在羅列在下方：

1.document.documentElement(引用：http://www.cnblogs.com/scy251147/archive/2011/04/10/2011420.html)

document.body 和 document.documentElement 的區別

     在設計頁面時可能經常會用到固定層的位置，這就需要擷取一些html對象的座標以更靈活的設定目標層的座標，這裡可能就會用到 document.body.scrollTop等屬性，但是此屬性在xhtml標準網頁或者更簡單的說是帶<!DOCTYPE ..>標籤的頁面裡得到的結果是0，如果不要此標籤則一切正常，那麼在xhtml頁面怎麼獲得body的座標呢，當然有辦法-使用 document.documentElement來取代document.body,可以這樣寫
例：
var top = document.documentElement.scrollTop || document.body.scrollTop;
 在javascript裡||是個好東西，除了能用在if等條件判斷裡，還能用在變數賦值上。那麼上例等同於下例。
例：
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
這麼寫可以得到很好的相容性。

       相反，如果不做聲明的話，document.documentElement.scrollTop反而會顯示為0。

      順便再存一下這個圖吧，總是挺難記清楚:

　　

2.onorientationchange(引用：http://zhidao.baidu.com/link?url=UhRfuvKnkaGAy-c9Neke_bwZ5hn_4s5MUQa5oP5irkcUKrmwS4CRzLMJ5kysZmPH7CMuOuiQvG4Q90nQZA-JPq)

擷取手機旋轉螢幕事件，根據我看的很多網上資料顯示，大部分手機瀏覽器都支援這個事件，如果不支援，可以使用原始的 resize

 

<script type="text/javascript">var evt = "onorientationchange" in window ? "orientationchange" : "resize";      window.addEventListener(evt, function() {    alert("旋轉螢幕");}, false);</script>

 3. width && (docEle.style.fontSize = 20 * (width / 320) + "px");

意思是：

if （width） {
  docEle.style......
}
也就是width != null 或者 undefined或者0

 

 ...後面補充

 

JavaScript---手機端--頁面自適應