部分android手机webview中h5页面设计与真实字体大小不一致解决方案

html5 同时被 2 个专栏收录
2 篇文章 0 订阅
2 篇文章 0 订阅

摘要
首选,h5页面是在所有web浏览器显示正常,采用rem弹性设置的前提下,个别android机出现的字体不一致,导致页面整体变大或变小的情况。H5的解决方案。

环境
部分android手机中webview内嵌h5页面
编辑工具HBuild X

经调试发现同一台手机,同样的代码

	var clientWidth = document.documentElement.clientWidth;
	var bodyWidth=$('body').width();

clientWidth是不一样的,比如有时是360,有时是1080.
而我们经常 clientWidth = document.documentElement.clientWidth计算rem与px的换算关系。因为clientWidth获取的值有差异时,计算的换算关系就不准确了,经过测试bodyWidth=$(‘body’).width()是一直不变的。当两个不一样时,建议采用bodywidth来计算,如下面代码。

function setPX(){	
	const html = document.getElementsByTagName('html')[0];
	const realFs = parseFloat(window.getComputedStyle(html).fontSize);
	var clientWidth = document.documentElement.clientWidth;
	var bodyWidth=$('body').width();
	var fontSize;	
	if(bodyWidth<clientWidth){
		clientWidth=bodyWidth;		
	}
	if (clientWidth >= 750) {
		document.documentElement.style.fontSize = '100px';
	} else {
		fontSize=clientWidth / 7.5;
		document.documentElement.style.fontSize = fontSize+'px';		
	}	
}

结语:
欢迎加入微信群一起学习讨论!

请添加图片描述

  • 0
    点赞
  • 3
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值