一套尺寸完美适配移动端

一套设计完美适配各种手机尺寸，这篇文章适合有一定的前端基础的人去看。
先直接上代码把:

<!--移动端版本兼容 -->
   <script type="text/javascript">
       var phoneWidth = parseInt(window.screen.width);
       var phoneScale = phoneWidth / 640;
       var ua = navigator.userAgent;
       if (/Android (\d+\.\d+)/.test(ua)) {
           document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + '">');
       } else {
           document.write('<meta name="viewport" content="width=640, user-scalable=no">');
       }
   </script>
   <!--移动端版本兼容 end -->

先了解几个概念把：
1.ideal viewPort移动端理想尺寸(通常为设计稿的尺寸(一般设计稿尺寸推荐使用，320/640/750))
2.layout viewPort 移动端网页的可视区域(980/1024)
3.visual view 屏幕的尺寸
原理：
我们现在已一款安卓手机屏幕尺寸(600*960)为例,当我们设计稿的尺寸为640，第一步：我们设置meta viewPort width=640时，这个时候我们的layout viewPort
的宽度变为640而不是980了，但是我们的网页尺寸还是比屏幕大，这个时候我们就要去把网页进行去缩放了。sacle=visualview/640 就等于我们要缩放的比例了，所以我们的minimum-scale=sacle，这种时候我们的网页就和我们的屏幕完美的适配了。
备注：
在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的,所以我们的ipone就不需要去考虑了