視窗尺寸
視窗尺寸是瀏覽器視窗的整體大小（包括滾動條），是通過css畫素度量的，可以通過window.innerwidth/window.innerheight獲得。它告訴開發人員有多少空間可以用來做css布局。當使用者放大的時候，這個值會減小。所以如果使用者進行放大操作，在視窗中能獲取的空間將會變小，window.innerwidth/window.innerheight的值也變小。
滾動距離
window.pagexoffset和window.pageyoffset包含了文件水平和垂直方向的滾動距離。這個屬性也是以css畫素進行度量的。
檢視的功能是用來約束**中最頂級包含塊元素html的
當使用流式布局對網頁中元素大小百分比表示時，我們知道他是以父元素寬度來計算實際寬度的。但是body的大小如何定義的呢。body是按照html元素的寬度定義的。在桌面環境下而html的寬度是和瀏覽器視窗的寬度是一樣的。
而這樣就會出現流式布局中常見的問題。在專案中設定導航欄的寬度為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提供了相對於螢幕的以裝置畫素進行度量的座標。
不同於pc端，移動端螢幕較小，無法正常展示除css布局。明顯的解決方案是是viewport變寬一些。這時，就出現了將viewport分成兩部分的情況，即：visual viewport和layout viewport
「layout viewport可以比作一張不會變更大小或者形狀的大圖。現在想象有乙個小一些的框架，通過它可以檢視這個大圖。這個框架的周圍被不透明的材料所環繞，所以只能看到大圖的一部分。通過這個框架看到的大圖部分就是visual viewport。可以通過放大或縮小框架、甚至可以改變框架的方向來看大圖，但是大圖的大小和形狀（layout viewport）是不會變化的「
visual viewport是頁面當前顯示在螢幕上的部分，使用者可以通過滾動來改變他所看到的頁面的部分，或者通過縮放來改變visual viewport的大小。
css布局中，尤其是百分比寬度，是以layout viewport作為參考係計算的。所以html元素在初始情況下用的是layout viewport的寬度，並且css是在layout viewport基礎上布局的。每個瀏覽器在移動裝置上的預設layout viewport的寬度是不同的，一般為980px。
當對頁面進行縮放時，visual viewport的尺寸會發生變化，layout viewport的尺寸仍然不變
layout viewport的度量
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元素的整個尺寸
在這兩個檢視的基礎上又出現了ideal viewport第三種檢視。ideal viewport的寬度等於移動裝置的螢幕寬度，只要在css中把某一元素的寬度設為ideal viewport寬度，那麼這個元素的寬度就是裝置螢幕的寬度了。ideal viewport的意義在於，無論在何種解析度的螢幕下，那些針對ideal viewport而設計的**，不需要使用者手動縮放，也不需要出現橫向滾動，都可以完美呈現
meta標籤中content屬性可以設定的屬性如下
* width： 設定layout viewport的寬度
* initial-scale：設定最初縮放比
* minimum-scale：設定最小縮放比
* maximum-scale：設定最大縮放比
* user-scalable: 設定使用者是否可縮放
當設定width值為device-width或將initial-scale的值設為1時，相當於設定layout viewport的寬度等於ideal viewport的寬度.這裡需要提醒一下，頁面的縮放是相對於ideal viewport 的尺寸進行縮放的
移動前端開發之viewport的深入理解
移動端各終端的適配問題研究 關於viewport
test 給div設定乙個的樣式如上，當只設定寬高時，在普通的瀏覽器上顯示的div寬高和設定的寬高時相同的，即css畫素等於裝置畫素。當為div設定zoom放大後，div的css畫素不變，但是div佔據的裝置寬高為200 200。所以，當對元素或者頁面進行縮放時，裝置畫素和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適配 以上方案實際開發中本人都已經使用過，後來最終選擇第三種方案。為什麼呢？第一種響應式方案，看似簡單，實際開發中...