viewport详解
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。。。
但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小
一般来讲，移动设备上的viewport都是要大于浏览器可视区域的。。。
移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
css概念
css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的
移动设备的屏幕像素密度越来越高，1css像素可能等于更多物理像素
iPhone3，320， 1px = 1物理； iphone4， 640， 1px ＝ 2物理
还有用户缩放
当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；
反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。
移动设备上的三个viewport
1 layout viewport
宽度可以通过 document.documentElement.clientWidth 来获取。
移动设备上的浏览器认为自己必须能让所有的网站都正常显示浏。。览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了
2 visual viewport
宽度可以通过window.innerWidth 来获取
代表 浏览器可视区域的大小
3 ideal viewport完美适配移动设备的viewport
不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；
第二，显示的文字的大小是合适
ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport
content=“width=device-width。。在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度
缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，不就得到了 ideal viewport吗。。。这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
http://www.cnblogs.com/2050/p/3877280.html