wap手机端页面根据dpr和宽度计算出font-size对应数值
来源:互联网 发布:龙珠超宇宙捏脸数据 编辑:程序博客网 时间:2024/06/05 13:23
wap手机端页面根据dpr和宽度计算出font-size对应数值
最近在进行公司的wap端首页改版和添加活动页面,为了做的效果更好一些,就参考淘宝和京东的wap版,然后对淘宝的wap做了一些分析,淘宝的wap触屏版做的自适应和兼容性很不错,于是整理了下。
wap手机端页面根据dpr和宽度计算出font-size对应数值表如下:
dpr最小宽度320px最大宽度540px系数120px33.75px0.0625240px67.5px0.125360px101.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、测试工具:
使用谷歌自带开发者中心的手机模拟测试
- wap手机端页面根据dpr和宽度计算出font-size对应数值
- wap手机端页面根据dpr和宽度计算出font-size对应数值
- 【移动端】基于rem实现手机端页面自适应--动态改变dpr和font-size
- 前端新手——适配不同手机端页面的方案,动态查询dpr设置根元素font-size
- wap手机页面自动适应手机屏幕宽度
- 根据font-size计算rem尺寸,动态缩放页面
- 手机wap网站首页宽度和长度统计分析
- 手机wap网站首页宽度和长度统计分析
- 手机wap网站首页宽度和长度统计分析
- 手机端页面获取手机宽度自适应
- 根据font/ text,计算自己的size
- font-size和font-family不同浏览器
- font-size和font标签的size属性的区别
- 手机页面html100%宽度
- 手机wap页面的注意事项
- 手机wap页面开发续
- 手机wap页面开发小记
- excel根据列序号计算出对应的列字母
- UML类图入门,看完基本懂了怎么画图了
- java中的SuppressWarnings注解的用法
- ThinkPHP框架常见问题集锦(会不断更新)
- 差集A-B(链表)
- 上位机出版本操作规范
- wap手机端页面根据dpr和宽度计算出font-size对应数值
- smack 登录openfire
- TableView详细解释
- 请用普通的互斥锁编程实现一个读写锁
- PHP网页乱码处理
- scala中的上界、下界、协变和逆变
- 在WAS6.0 ND中实现集群
- 地址邮编, 用CoreData实现插入/删除/查询(包含结果排序,模糊查询)
- 修改窗口属性