您的位置：首页 > 移动开发

wap手机端页面根据dpr和宽度计算出font-size对应数值

2016-03-17 16:07 267 查看


wap手机端页面根据dpr和宽度计算出font-size对应数值

最近在进行公司的wap端首页改版和添加活动页面，为了做的效果更好一些，就参考淘宝和京东的wap版，然后对淘宝的wap做了一些分析，淘宝的wap触屏版做的自适应和兼容性很不错，于是整理了下。

wap手机端页面根据dpr和宽度计算出font-size对应数值表如下：
dpr最小宽度320px最大宽度540px系数
120px33.75px0.0625
240px67.5px0.125
360px101.25px0.1875
备注：

1、是按照倍数关系增加的

2、手机淘宝就是按照这种方式计算的m.taobao.com

3、因为我PHPer，不是专业的前端，如果有错，请指导下，谢谢。

附件：

1、js代码计算方式：

//通过手机屏幕dpr和手机宽度来确定font-size的值


function
autorun(){


//初始值


var
default_width=20;


var
default_dpr=1;


var
dpr=window.devicePixelRatio;


var
width=screen.width;


var
html_style=
‘‘
;


var
body_style=
‘‘
;


//dpr倍数


var
difference=dpr/default_dpr;


//计算


if
(difference===1||difference===2||difference===3){


var
default_min_size=20*difference;


var
default_max_size=33.75*difference;


var
default_coefficient=0.0625*difference;


html_style=get_font_size(width,default_min_size,default_max_size,default_coefficient);


body_style=
‘font-size:‘
+difference*12+
‘px‘
;


}
else
{


html_style=get_font_size(width,20,33.75,0.0625);


body_style=
‘font-size:12px‘
;


}


//进行dom操作


$(
"html"
).attr(
‘style‘
,html_style);


$(
"body"
).attr(
‘style‘
,body_style);


}


/**


*通过手机屏幕dpr和手机宽度来确定font-size的值


*@param{int}width


*@param{int}default_min_size


*@param{int}default_max_size


*@param{int}default_coefficient


*@returns{String}


*/


function
get_font_size(width,default_min_size,default_max_size,default_coefficient){


var
style=
‘‘
;


//屏幕宽度需要在320-540之间进行计算


if
(width<320){


style=
‘font-size:‘
+default_min_size+
‘px‘
;


}
else
if
(width>540){


style=
‘font-size:‘
+default_max_size+
‘px‘
;


}
else
{


var
difference=width-320;


var
fontsize=default_min_size+difference*default_coefficient;


style=
‘font-size:‘
+fontsize+
‘px‘
;


}


return
style;


}


2、参考文章：

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

3、参考JS函数：

var
dpr=window.devicePixelRatio;//获取手机屏幕dpr


var
width=screen.width;//获取手机屏幕宽度


4、测试工具：

使用谷歌自带开发者中心的手机模拟测试

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航