webapp字號大小跟隨系統字號大小縮放

最近作了一個webapp項目，混合式開發，外部原生，內部webview嵌套H5頁面。前端方面採用了vue開發，適配採用的是flexible+rem作的適配。原本一切都很好，但是吧，領導說客戶有的年紀大 ，看不清字體，但願網頁字體能夠跟隨系統字號大小變化。當時內心真是...，然無奈只能想辦法解決問題，網上搜羅一圈都是禁止內部跟隨系統字號變化，看來只能本身搞了。

第一種方案

最簡單的讓原生進行操做，內部不作控制，外部放大，裏面本身適應。可是有問題，文本字體能夠放大，有的輸入框和輸入框的內容卻沒有放大，故淘汰該方案。

第二種方案

外部原生webview讓裏面的放大縮小不跟隨系統變化，內部本身控制。和安卓同事商量後，他去獲取系統放大的參數，而後將參數傳遞給內部webapp，內部來自定義控制縮放。
代碼以下：

setScaleFont(){
      let fontScale=1;
      let scaleFontSize;
      let initFontSize;
      fontScale=parseFloat(window._nativeMe.getFontScale());
      console.log(`縮放比例：${fontScale}`);
      let docHtml=document.getElementsByTagName("html")[0];
      initFontSize=this.getStyle(docHtml,'fontSize').split('px')[0];
      scaleFontSize=fontScale*initFontSize;//1-1.4等比縮放
      docHtml.style.fontSize=scaleFontSize +'px';
    },
    getStyle(obj, name){
      if(window.currentStyle){
        return obj.currentStyle[name];
      }
      else{
        return getComputedStyle(obj, false)[name];
      }
    }

先獲取到初始的縮放比例，而後根據安卓原生傳入的縮放比例改寫html標籤上的fontsize大小，因爲採用了rem適配，自會根據根元素大小進行適配。這種方案必須確保先讓flexible的適配先執行，而後判斷是不是安卓，若是是安卓就執行setScaleFont方法纔有效，不然會被flexible裏面的方法覆蓋掉，形成頁面先放大後縮小或者先縮小後放大的現象。

如上圖，我是註釋掉了這段代碼，否則就會產生上述放大縮小的現象。

結論

該種方法也只能在安卓上有效，蘋果因爲安全權限的問題沒法獲取系統字體的縮放比例，故沒法調整，若是有大神知道在蘋果上如何操做或者有別的更好辦法，請告知，不勝感激。