.test
給div設定乙個的樣式如上，當只設定寬高時，在普通的瀏覽器上顯示的div寬高和設定的寬高時相同的，即css畫素等於裝置畫素。當為div設定zoom放大後，div的css畫素不變，但是div佔據的裝置寬高為200*200。所以，當對元素或者頁面進行縮放時，裝置畫素和css畫素是不同的。在縮放比為100%的情況下（zoom為1），乙個css畫素完全等一乙個裝置畫素
視窗尺寸
視窗尺寸是瀏覽器視窗的整體大小（包括滾動條），是通過css畫素度量的，可以通過window.innerwidth/window.innerheight獲得。它告訴開發人員有多少空間可以用來做css布局。當使用者放大的時候，這個值會減小。所以如果使用者進行放大操作，在視窗中能獲取的空間將會變小，window.innerwidth/window.innerheight的值也變小。
滾動距離
window.pagexoffset和window.pageyoffset包含了文件水平和垂直方向的滾動距離。這個屬性也是以css畫素進行度量的。
而這樣就會出現流式布局中常見的問題。在專案中設定導航欄的寬度為100%並設定背景色，由於其他元素寬度的原因，當縮小瀏覽器的寬度時會出現水平輪動條。當向右拉輪動條的時候會發現右側導航欄為空白。其主要原因就是導航欄的寬度等於視口的寬度，當視口寬度發生變化，導航欄的寬度也發生變化，就可能導致導航欄顯示不完全。
如何度量viewport
document.documentelement.clientwidth/clientheight可以度量viewport的尺寸。這裡需要說明一下window.innerwidth和window.innerheight的區別：document.documentelement.clientwidth計算的寬度不算滾動條的寬度，而window.innerwidth的寬度將滾動條計算在內。
如何度量html元素
document.documentelement.offsetwidth/offsetheight可以獲得html元素的
事件中的座標
當乙個滑鼠事件發生時，event事件中提供了座標的相關資訊
pagex/y提供了相對於html元素的以css畫素度量的座標
clientx/y提供了相對於viewport的以css相對度量的座標。
screenx/y提供了相對於螢幕的以裝置畫素進行度量的座標。
css布局中，尤其是百分比寬度，是以layout viewport作為參考係計算的。所以html元素在初始情況下用的是layout viewport的寬度，並且css是在layout viewport基礎上布局的。每個瀏覽器在移動裝置上的預設layout viewport的寬度是不同的，一般為980px。
document.documentelement.clientwidth/height包含了layout viewport的尺寸。layout viewport的寬度和高度等於在最大限度縮小的模式下螢幕上所能顯示的任何內容的尺寸。移動裝置的朝向會對高度產生影響，但對寬度不會產生影響。當在meta中設定width屬性時，layout檢視的寬度等於width設定的的寬度值。如果想讓layout的寬度等於裝置的寬度，可以設定如下：
如需要知道visual viewport相對於當前layout viewport的位置，需要使用window.pagex/yoffset屬性，ie將值儲存在document.documentelement.scrollleft/top中
document.documentelement.offsetwidth/height返回以css畫素為單位的html元素的整個尺寸
移動前端開發之viewport的深入理解
移動端各終端的適配問題研究 關於viewport
視窗尺寸 視窗尺寸是瀏覽器視窗的整體大小 包括滾動條 是通過css畫素度量的，可以通過window.innerwidth window.innerheight獲得。它告訴開發人員有多少空間可以用來做css布局。當使用者放大的時候，這個值會減小。所以如果使用者進行放大操作，在視窗中能獲取的空間將會變小...
關於移動端適配問題
移動端適配採用rem進行編寫css，整理了三種方案 方案一 簡單的js適配 function resizeroot width document.documentelement.style.fontsize devicewidth num1 px resizeroot 750 window.onre...
關於移動端rem適配的相關方案研究
1.移動端的相關適配目前探索中已經尋找了很多種的適配方案，1 響應式布局。2 640px 750px做一版移動端的設計圖 em適配 3 640px 750px做一版移動端的設計圖 rem適配 以上方案實際開發中本人都已經使用過，後來最終選擇第三種方案。為什麼呢？第一種響應式方案，看似簡單，實際開發中...