【react-natvie】react-native Android(安卓)webview下h5使用rem布局会随系统字体放大缩小的解决方案

问题描述：

react-native Android webview下h5使用rem布局会随系统字体放大缩小

Android普通浏览器里，在浏览器直接调整字体大小（例如UC、QQ浏览器等都支持改变浏览器里字体大小），h5使用rem布局会随浏览器设置的字体放大缩小

由于Rem布局本身已经考虑到了不同机型/浏览器/分辨率的适配问题，这个时候再随系统字体、浏览器字体放大缩小就会造成布局的混乱，所以这里介绍一下解决方案

解决方案：

（这里是试错方案）针对react-native里，有尝试使用在原生android里使用对根字体指定不用缩放，但实际没有起到效果（具体在原生里是这么改的，见下面代码）

react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java

WebSettings settings = webView.getSettings(); // 找到这行代码，在之后增加下面这行settings.setTextZoom(100);

既然原生的方案不起效果，那么还是从网页的方案入手

假设之前的rem计算方案为，根字体等于屏宽的十分之一

// 获取屏幕宽度var width = $(window).width();var initFontSize;var remCount = 10;initFontSize = width / remCount;// 设置根元素字体大小。此时为宽的10等分document.documentElement.style.fontSize = initFontSize + 'px';document.body.style.fontSize = initFontSize + 'px';

那么在底下增加字体修正方案

var isAndroid = navigator.userAgent.match('Android');var remFixDom = document.createElement("div");remFixDom.style.cssText = "width:100%;height:1rem;opacity:0;position:absolute;z-index:-9999;";document.body.appendChild(remFixDom);var render = window.getComputedStyle(remFixDom);var fixedFontSize = initFontSize;if (isAndroid) {  var rRate = (render.width.slice(0, -2) / render.height.slice(0, -2)).toFixed(1);  if (rRate != remCount) {    fixedFontSize = initFontSize * (rRate / remCount);  }  if (fixedFontSize != initFontSize) {    document.documentElement.style.fontSize = fixedFontSize + "px";    document.body.style.fontSize = fixedFontSize + 'px';  }}

创建一个宽为100%，高为1rem的容器，通过获取它实际宽高的px，通过宽比上高，即可获得字体实际的缩放比例，通过和我们需要的原始字体与我们想要的比例做一下处理，即可获得修正了的字体大小

使用此方法获得的根字体大小，即可解决安卓字体缩放引起rem计算的偏差影响

然而此方法只能应用于安卓；ios上调整系统字体大小不会影响rn中webview的rem的计算（字体和rem都和没有调整系统字体大小的时候一样），调整浏览器的字体大小也不影响浏览器中rem的计算（浏览器中只是字体变大了，这个字体变大暂时没有解决方案）

参考链接：

https://blog.csdn.net/weixin_40398051/article/details/78260511

https://www.cnblogs.com/youryida/p/7299922.html

更多相关文章

随机推荐