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

這期內容當中小編將會給大家帶來有關webapp字號大小跟隨系統字號大小縮放，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

第一種方案

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

第二種方案

外部原生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里面的方法覆蓋掉，造成頁面先放大后縮小或者先縮小后放大的現象。

上述就是小編為大家分享的webapp字號大小跟隨系統字號大小縮放了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。