移动web开发----Viewport

首先抛出一个问题，，，
一个PC页面在移动设备上展示效果会咋样？是像下面整个页面展示还是只是展示页面的一部分呢？

iPhone5是320px,一个1000多像素的pc页面在一个320px的移动设备上会怎么显示？下面用代码来亲自测一下就知道鸟。
在iPhone5的设备容器上能看见整个页面，iPhone5只有320px但是却能显示出来整个页面，像上图中的左图一样这就是viewpoint的作用。
先来讲讲viewport的历史，早在洛基亚的时候已经有移动web的雏形出现，那个时候已经有PC页面了，那时候手机也可以访问PC页面，但是我们的PC页面是1000+px，用几百像素的手机去访问看到的效果就像上图中的右图一样，只能看到整个页面的一部分，这时候需要用户拖动页面来看页面的其它部分，后来觉得这种用户体验不太好就引入了viewport的概念。viewport就是把一个比较大的页面渲染在一个比较大的viewport里面（ios的viewport普遍是980px），然后通过缩放来看见页面的整个全貌。最终得到的效果就是上图中的左图。总结一下：
手机浏览器默认为我们做了两件事情

• 页面是渲染在一个980px(ios)的viewport
• 然后通过缩放来看见整个viewport的全貌

那通过缩放不就行了么那为什么渲染时还要有viewport呢？是为了排版正确。伪造了一个虚拟的大的viewport，让你的页面先排版正确再进行缩放。你可以理解为有两个viewport。
visual viewport（度量/视口）document.body.innerWidth取得
layout viewport（布局viewport）window.clientWidth取得
可以理解成手机屏幕分成两层，第一层（底层）就是layout viewport负责把页面渲染在底层，然后通过缩放控制视口viewport来看到页面的全貌。

为什么不使用默认的980px的布局viewport呢？原因有以下四点：

1. 宽度不可控制，不同系统不同设备的默认值都可能不同；
2. 页面缩小版版显示交互不友好；
3. 链接不可点击；
4. 有缩放，缩放后又有滚动；
5. font-size为40px等于PC上12px同等物理大小，不规范。

Viewport Meta标签

<meta name="viewport" content="name=value,name=value">

• width:设置布局viewport的特定值（“divice-width”）
• initial-scale:设置页面的初始缩放
• minimum-scale:最少缩放
• minimum-scale:最大缩放
• user-scalable:用户能否缩放
  默认的 度量viewport可以通过window.innerWidth取得,布局viewport可以通过document.body.clientWidth取得 。
  

设置width = device-width；让布局viewport等于设备宽度，通过initial-scale = 1； 让度量viewport等于布局viewport。最终得出最佳的设置 布局viewport = 设备宽度 = 度量viewport。常用的代码就是：

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