mwen
mwen
  • 发布:2023-04-14 11:41
  • 更新:2023-04-14 11:41
  • 阅读:977

找到一个动态修改uniapp程序页面缩放的办法,分享给有需要的人

分类:uni-app

uniapp配置rpxCalc并不能动态指定1个rpx转换成多少px。
但是系统本身是将rpx转换为rem来处理的,问题的关键在于修改rootFontSize,也就是html元素的fontSize
那么可以在所有page(怨念,每个page都用一个新的webview)的onShow方法里面inject一段js,用于修改html的fs

function fixRPX(){  
  var VH = window.innerHeight;  
  var fs = Number((VH/70).toFixed(2));//此处是按980高度对应14px来等比例计算的,可自行摸索合适的数值  
  document.querySelector('html').style.fontSize=fs+'px';  
}
onShow(){  
  var page=getCurrentPages().slice(-1)[0];  
  var webView = page.$getAppWebview();  
  webView.evalJS( `(${fixRPX.toString()})();` );  
}

这样就可以在每个页面显示的瞬间修改rootFontSize
也可以把所有页面放在一个layout母版页内,这样只需要改模板页的mounted
本人已实测有效

0 关注 分享

要回复文章请先登录注册