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

hover_lew 發布于2019-08-30 15:55 / 822人閱讀

摘要：和安卓同事商量后，他去獲取系統放大的參數，然后將參數傳遞給內部，內部來自定義控制縮放。這種方案必須確保先讓的適配先執行，然后判斷是否是安卓，如果是安卓就執行方法才有效，否則會被里面的方法覆蓋掉，造成頁面先放大后縮小或者先縮小后放大的現象。

最近做了一個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里面的方法覆蓋掉，造成頁面先放大后縮小或者先縮小后放大的現象。

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

結論

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

GPU云服務器云服務器 html設置字號大小 asp字號代碼系統內存大小 linux 系統磁盤大小

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117131.html

如何更愉快地使用em —— 別說你懂CSS相對單位

摘要：相對單位的值會根據外部影響因素的變化而變化。很自然，相對單位使用起來會比較困難。在本章中，我將揭開相對單位的神秘面紗。重點來了，使用相對單位聲明的值會由瀏覽器轉化為一個絕對值，我們稱之為計算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《W...

gekylin 2019-08-30 15:54 評論0 收藏0
如何更愉快地使用rem —— 別說你懂CSS相對單位

摘要：值得注意的是，這個設置對使用或其他絕對單位定義的字號大小無效。事實上，提供了一個在和間的相對單位折中解決方案，而且更易于使用。圖使用相對單位和繼承字號的面板下面是模板，加到你的頁面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其...

Snailclimb 2019-08-30 15:54 評論0 收藏0
前端基本功之從大型項目中迅速定位修改位置

摘要：前端開發，有一項很重要的基本功，就是在大型項目中，比如幾萬行代碼中，迅速找到新增功能或調試的切入點。猜測輸入框大小跟這個字號有關系。通過觀察分析和斷點技巧，我們很容易地就從一個大型項目幾萬行代碼中迅速定位到我們要修改的地方。前端開發，有一項很重要的基本功，就是在大型項目中，比如幾萬行js代碼中，迅速找到新增功能或調試bug的切入點。特別是你只是接手這個項目，并不了解其中每一個功能點所...

rubyshen 2019-08-22 17:32 評論0 收藏0
REM如何無視手機系統字號調整

摘要：經檢查發現，中的值是正常值，但是出現了一個匪夷所思的情況頁面上的以為例，在移動端內嵌中設置元素最終出來的高度竟然是。。。整個人就蒙圈了，然后突然靈光一閃，發現是系統的字號調大了。。。系統如何處理的這個展示還沒有搞清楚。。。此問題屬于REM的優化解決如下問題在移動端rem布局中，多數環境多數瀏覽器下rem的計算妥妥的沒有問題，但是部分環境，比如某些軟件內嵌的webvie...

王笑朝 2019-08-02 15:59 評論0 收藏0