微信H5页⾯调整字体⼤⼩,⽹页适配⽅式
项⽬本⾝前端⽤的是rem布局,在正常的⽂字⼤⼩下,布局跟观感是没啥问题,但是因客户的⼀个操作,需要放⼤字体查看⽂章,结果
页⾯布局错乱了,⽹上搜索⼀番都是禁⽌页⾯放⼤缩⼩的。需求是要适配⽤户微信端的⽂字⼤⼩调整,于是经过多番尝试,有了如下的代码
ntListener("WeixinJSBridgeReady",function(){
var_size=(Width*20/320)//rem计算的值
("menu:tfont",function(e){
//ze,ale
switch(+ze){
ca1:
mentsByTagName('html')[0].ze=(_size-2)+'px'
break;
ca2:
mentsByTagName('html')[0].ze=_size+'px'
break;
ca3:
mentsByTagName('html')[0].ze=(_size+1)+'px'
break;
ca4:
mentsByTagName('html')[0].ze=(_size+2)+'px'
break;
ca5:
mentsByTagName('html')[0].ze=(_size+3)+'px'
break;
ca6:
mentsByTagName('html')[0].ze=(_size+4)+'px'
break;
ca7:
mentsByTagName('html')[0].ze=(_size+5)+'px'
break;
ca8:
mentsByTagName('html')[0].ze=(_size+6)+'px'
break;
}
("tFontSizeCallback",{
fontSize:0
})
})
//样式也控制禁⽌放⼤缩⼩
vardoc=ntElement;
TextSizeAdjust="none"
},!1);
以上的思路就是因为是基于rem布局,所有单位是rem,调整⽂字⼤⼩后只是修改fontSize的值,默认的放⼤缩⼩功能还是需要禁⽌掉的
本文发布于:2023-03-10 01:26:11,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/1678382772199237.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:网页字体大小怎么调.doc
本文 PDF 下载地址:网页字体大小怎么调.pdf
留言与评论(共有 0 条评论) |