手机webapp自适应屏幕方案

方案一：

if(/Android (\d+\.\d+)/.test(navigator.userAgent)){

var version = parseFloat(RegExp.$1);

if(version>2.3){

var phoneScale = parseInt(window.screen.width)/640;

document.write('');

}else{

document.write('');

}

}else{

document.write('');

}

第二种：设计固定宽640px;

使用

var w = $(window).width();

var bl = (w/640);//比率计算

//等比全屏缩放，注意处理一些弹性框的宽度问题，此方法会缩放所有框弹性框，有的js弹性框会二次缩放，或者扩大

$("body").css({'-webkit-transform':"scale("+1*bl+")","-webkit-transform-origin":"0 0"});//建议不对body缩放，可以把要缩放的地方加上一个固定class，对些class进行缩放

方案三：

全部按百分比控制大小width:100%;

height:外框用js设计等比高度，内框设置height相应百分比;

 

方案四：用rem做单位，淘宝手机端都是用rem做单位

如果字体为12px，后面的1rem就等于12px，如果是14,那么1rem就等于14px