【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;
// 设置根