关于移动端各设备的适应

移动端设备大概分为：手机和平板，手机分为ios和安卓。

一、关于适应各设备宽度

　　首先，只需要要求美术按照6plus的分辨率来设计和出图。
然后页面HTML元素设置font-size：100px，接着页面里任何需要设置尺寸的，都使用rem,因为我设定了font-size为100px，所以尺寸可以很容易的转换,比如10px=.1rem
html{font-size:100px;}
×{font-size:.14rem}
接着,页面启动需要一个js语句,用以获得当前屏幕分辨率跟设计稿分辨率的比例,乘以100,去设置html的font-size,这样页面所有实用rem的元素都将获得对应的尺寸.
设计稿如果以640为宽度
var scale = $('body').width() / 640;
$('html').css('font-size', 100 * scale + 'px');
页面启动执行一下就可以了,也可以在onsize事件里添加一份,这样页面发生变化,也会自动适应.

二、各平台间的适应

<!--移动端版本兼容 -->
<script type="text/javascript">
         var phoneWidth =  parseInt(window.screen.width);
         var phoneScale = phoneWidth/640;
         var ua = navigator.userAgent;
         if (/Android (\d+\.\d+)/.test(ua)){
                   var version = parseFloat(RegExp.$1);
                   if(version>2.3){
                            document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
                   }else{
                            document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
                   }
         } else {
                   document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
         }
</script>
<!--移动端版本兼容 end -->
三、页面中的背景及尺寸
页面尺寸定背景640*1039（iPhone6 Plus在微信浏览器中的尺寸），内容区域定在640*832（iPhone4在微信浏览器中的尺寸），相对于背景垂直居中。如果不需要兼容iPhone4的屏幕（不过基本客户都会要求去兼容），那么内容区域最好定义在640*1008（iPhone5及大部分中高端安卓机在微信浏览器中得尺寸），依然相对于背景垂直居中。如果客户对于图片有特别高精度的要求，那么psd中的需要高精度的图片尺寸请使用切片宽高一倍大的图片（甚至更大，也能0.5倍，视情况而定），页面中给img设置width即可。