約定：1.<meta name="viewport" content="width=device-width">這種標記簡稱"wdw"="width=device-width" 約定：2.viewport簡稱vp 約定：3.常用的屬性會有“★”標誌 都是只讀屬性！ 其中Chrome或FF沒通過的屬性 ...
約定：1.<meta name="viewport" content="width=device-width">這種標記簡稱"wdw"="width=device-width"約定：2.viewport簡稱vp約定：3.常用的屬性會有“★”標誌都是只讀屬性！其中Chrome或FF沒通過的屬性標記（未實現）window對象：1.★innerHeight:文檔（網頁）顯示區的高度，以像素計。（這裡的寬度和高度不包括菜單欄、工具欄以及滾動條等的高度）2.★innerWidth 對於手機瀏覽器來說，innerWidth計算的是vp寬度，當沒有wdw時候，iphone7的預設vp是980px，所以其innerWidth也是980px；而當加上wdw時，innerWidth值會變成375px，這個值就是wdw的值。（我們認為PC瀏覽器的vp是個不固定的值，它隨著網頁寬高的變化而1：1地變化，例如網頁900*750px，那麼瀏覽器自動把vp變成900*750px，然後在vp中渲染這個網頁，再把vp放入瀏覽器視窗中給用戶看。遇到用戶瀏覽器視窗太小不能完全顯示時，則加上滾動條；遇到用戶瀏覽器視窗過大時，放大vp寬至瀏覽器視窗寬度大小，然後把網頁渲染進vp，對於那些百分數的元素放大，對於那些絕對單位值的元素不做放大，最後把vp放入瀏覽器視窗中，這是佈局意義上的放大） 另外，在手機上，如果一網頁寬大於wdw設置的值，那麼vp的width會等於該網頁的寬，渲染完成之後，放入瀏覽器視窗，會加上水平滾動條。
所以總結一下wdw的所有情況：（約定：網頁實際寬簡稱wtw = webpage true width；不存在wdw時vp寬 = 預設值，如980px；手機瀏覽器視窗 = mbw = mobile browser window） 一定要時刻記得，wdw用來設置vp的寬，但最後不一定相等！ wtw = wdw：網頁剛好完全渲染到vp中，然後vp以1：1放到mbw中 wtw > wdw：vp寬將不等於wdw，它會按照wtw寬適當增加，然後以新寬度渲染網頁，最後放入mbw中，但是因為mbw的寬比vp小，所以會加上水平滾動條 wtw < wdw：網頁完全渲染到vp中，對於那些設置百分數之類屬性的元素會占有更多的空間來補滿多出的vp寬，而絕對單位的值的那些元素不做任何放大
3.outerHeight:整個瀏覽器的高度4.★pageXOffset pageYOffset（對於整個視窗來說，要對於具體某個元素請看DOMElement對象中的有關屬性）
screen對象：1.availHeight:瀏覽器可用的屏幕高度，不包括底部任務欄2.availWidth3.（未實現）deviceXDPI:屏幕的每英寸水平點數4.（未實現）deviceYDPI5.height:屏幕的總高度，相對於availHeight來說這個屬性包含了任務欄6.width:其值和availWidth一樣7.colorDepth:色彩深度，即俗稱的顏色多少位（24位就是真彩色）8.pexelDepth:像素深度9.（未實現）updateInterval屏幕的刷新率
DOMElement對象：1.★clientHeight:元素的顯示高度（包括內邊距，不含邊框和外邊距）2.★clientWidth: 對於PC瀏覽器，它對於網頁顯示都是1：1的，所以clientWidth獲取的總是元素實際的寬度，但是手機瀏覽器實際上是把網頁渲染在vp上再放入瀏覽器的可見區域中，所以你獲取的是元素的實際寬度，但事實上顯示出來的寬度要小，因為他已經被縮放過了。 有如下案例：（頁面只存在一個div元素，寬高都為40px） 對於iphone7預設vp的寬為980px，那麼 不加wdw：document.body.clientWidth=980-8*2=974px（這個獲取的是vp寬！），這時獲取div的clientWidth是40px，這個值是不會變的，因為就是元素本身的寬度，但是手機上顯示出來的顯示寬度為22px 加上wdw：document.body.clientWidth=375-8*2=359px，說明這個手機的網頁視窗顯示寬度為375px，這時候的div顯示的寬度是40px（你要知道為什麼要設置vp == 手機瀏覽器視窗大小，就是為了不縮放網頁）3.offsetHeight:clientHeight + 邊框4.offsetWidth5.offsetTop:元素的上外邊框至offsetParent的上內邊框之間的像素6.offsetLeft7.offsetParent:返回該元素最近的定位父元素 前言：對於一個絕對定位元素，如果一直到body（包括body）都沒有在它所有父元素中發現定位（絕對和相對）屬性，即該元素不存在定位父元素，那麼他將會按照瀏覽器視窗左上角定位。一般body不設置定位屬性（絕對、相對和固定），所以對於offsetParent來說如果返回body，那該元素沒有定位父元素，實際上對於沒有定位父元素的元素其值應該返回null而不是body。
1.fixed定位元素，返回null（但在ff中返回body，這不符合標準），因為它相對於瀏覽器視窗定位，對於fixed元素獲取的offsetTop和offsetLeft其實就是它的top和left值 2.body的offsetParent永遠是null（chrome和ff都是null，測試通過），對body獲取其offsetTop和offsetLeft獲取的值是相對於瀏覽器視窗左上角定位 3.static元素永遠是最近的擁有relative或absolute的父元素，如果父元素都不存在定位則返回body（實際上應該返回null，表示沒有定位父元素，要按照瀏覽器視窗定位，但是chrome和ff都返回body），這時（這裡指如果時的情況）該元素的offsetTop和offsetLeft值是相對於瀏覽器視窗左上角定位而不是根據返回的body元素進行定位，否則如果存在父元素有定位屬性，那麼offsetTop和offsetLeft返回的是該父元素左上角定位的值（以自己的邊框外部到定位父元素的包括內部） 3.absolute定位元素遵循css定位佈局，即最近的擁有relative或absolute的父元素，如果不存在，那麼返回body，offsetTop和offsetLeft以瀏覽器視窗左上角定位 4.relative在css定位佈局中不存在定位父元素，但是這裡它的offsetParent還是最近的父級定位元素（relative和absolute），如果不存在，返回body，並且offsetTop和offsetLeft以瀏覽器視窗左上角定位 5.對於absolute & relative，如果父元素都沒有定位（絕對和相對）那麼就是body，並且offsetTop和offsetLeft以瀏覽器視窗左上角定位
總結：對於DOMObj.offsetParent返回的值，瀏覽器不會管DOMObj是static還是absolute還是relative，如果它有定位父元素，那麼按照定位父元素左上角定位，否則沒有定位父元素的話，那麼返回body，並且按照瀏覽器左上角定位；對於fixed，offsetTop和offsetLeft就是其top和left值。8.scrollHeight:元素的實際高度（包括內邊距，不含邊框和外邊距）（與clientHeight區別在於：例如一個textarea，寬度為100px，邊框寬度1px，當文字太多時顯示水平滾動條，這時clientWidth=102px，而scrollWidth=102px + 滾動條滾出去的寬度）9.scrollWidth10.scrollLeft:元素（滾動條）滾出的像素11.scrollTop:scrollHeight=scrollTop+clientHeight
總結：獲取一個元素在視窗左上角定位的信息：（JS）getBoundingClientRect()（JQ）offset()獲取一個元素的寬高信息：（JS）clientWidth clientHeight 說明：包含內邊距，不含邊框和外邊距（JQ）width() height() innerWidth() innerHeight() outerWidth(false) outerHeight(false) 說明：前兩個不含內邊距、邊框、外邊距；中間兩個包含內邊距，不含邊框，外邊距；後兩個包含內邊距，邊框，如果為真也會包含外邊距獲取滑鼠點擊位置：（JS）event.pageX pageY clientX clientY screenX screenY x y獲取觸摸點位置：（JS）event.touches[0].pageX pageY clientX clientY screenX screenY
