Viewport
手機瀏覽器默認為我們做了兩件事情
一. 頁面渲染在一個980px（ios）的viewport
二. 縮放
viewport分為2個
- visual viewport（度量/視口viewport)
外部
主要功能：縮放，手機屏幕使用時對頁面的縮放 - layout viewport(布局viewport)
內部
主要功能：對頁面的重新排版（渲染）
設計移動Web
不要使用默認的980px的布局viewport
- 寬度不可控制，不同系統不同設備的默認值都可能不同
- 頁面縮小版顯示，交互不友好
- 鏈接不可點
- 有縮放，縮放后又有滾動
font-size為40px等于pc上12px同等物理太少，不規范
解決辦法：
增加meta標簽
<meta name=viewport content="name=value,name=value">
Meta標簽介紹
<meta name=viewport content="name=value,name=value">
- width： 設置布局viewport的特定值（"device-width"）
- initial-scale:設置頁面的初始縮放
- minimum-sacle:最少縮放
- maxmum-scale:最大縮放
- user-scalable:用戶能否縮放
chrome console中
- document.body.clientWidth 默認的布局viewport
- window.innerWidth 默認的度量viewport
- document.body.clientHeight
- window.innerHeight
