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"/>