viewport

手機瀏覽器默認爲咱們作了兩件事：

（1）頁面渲染在一個980px(ios)的viewport

（2）縮放

爲何渲染時，要有viewport?--------爲了排版正確

viewport分兩種：

a.    visual viewport   ------窗口縮放：scale(度量viewport/視口)

b.    layout viewport

設計移動web 爲何不使用默認的980px的佈局viewport?

a. 寬度不可控制，不一樣系統不一樣設備的默認值均可能不一樣

b. 頁面縮小版顯示，交互不友好

c. 連接不可點

d. 有縮放，縮放後又有滾動

font-size爲40px等於PC上12px同等物理大小，不規範

<meta name="viewport" content="name=value,name=value"/>  能夠改造viewport

查看默認的佈局viewport:  document.body.clientWidth

度量viewport: window.innerWidth

縮放比例=度量viewport/佈局viewport

移動web最佳的viewport設置：佈局viewport=設備寬度=度量viewport

最經常使用的代碼：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>