【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