国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webapp字號大小跟隨系統(tǒng)字號大小縮放

hover_lew / 810人閱讀

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

最近做了一個webapp項(xiàng)目,混合式開發(fā),外部原生,內(nèi)部webview嵌套H5頁面。前端方面采用了vue開發(fā),適配采用的是flexible+rem做的適配。本來一切都很好,可是吧,領(lǐng)導(dǎo)說客戶有的年紀(jì)大 ,看不清字體,希望網(wǎng)頁字體可以跟隨系統(tǒng)字號大小變化。當(dāng)時心里真是...,然無奈只能想辦法解決問題,網(wǎng)上搜羅一圈都是禁止內(nèi)部跟隨系統(tǒng)字號變化,看來只能自己搞了。

第一種方案

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

第二種方案

外部原生webview讓里面的放大縮小不跟隨系統(tǒng)變化,內(nèi)部自己控制。和安卓同事商量后,他去獲取系統(tǒng)放大的參數(shù),然后將參數(shù)傳遞給內(nèi)部webapp,內(nèi)部來自定義控制縮放。
代碼如下:

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];
      }
    }

先獲取到初始的縮放比例,然后根據(jù)安卓原生傳入的縮放比例改寫html標(biāo)簽上的fontsize大小,由于采用了rem適配,自會根據(jù)根元素大小進(jìn)行適配。這種方案必須確保先讓flexible的適配先執(zhí)行,然后判斷是否是安卓,如果是安卓就執(zhí)行setScaleFont方法才有效,否則會被flexible里面的方法覆蓋掉,造成頁面先放大后縮小或者先縮小后放大的現(xiàn)象。


如上圖,我是注釋掉了這段代碼,不然就會產(chǎn)生上述放大縮小的現(xiàn)象。

結(jié)論

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/117131.html

相關(guān)文章

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

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

    gekylin 評論0 收藏0
  • 如何更愉快地使用rem —— 別說你懂CSS相對單位

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

    Snailclimb 評論0 收藏0
  • 前端基本功之從大型項(xiàng)目中迅速定位修改位置

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

    rubyshen 評論0 收藏0
  • REM如何無視手機(jī)系統(tǒng)字號調(diào)整

    摘要:經(jīng)檢查發(fā)現(xiàn),中的值是正常值,但是出現(xiàn)了一個匪夷所思的情況頁面上的以為例,在移動端內(nèi)嵌中設(shè)置元素最終出來的高度竟然是。。。整個人就蒙圈了,然后突然靈光一閃,發(fā)現(xiàn)是系統(tǒng)的字號調(diào)大了。。。系統(tǒng)如何處理的這個展示還沒有搞清楚。。。 此問題屬于REM的優(yōu)化 解決如下問題 在移動端rem布局中 , 多數(shù)環(huán)境多數(shù)瀏覽器下rem的計(jì)算妥妥的沒有問題 , 但是部分環(huán)境 , 比如某些軟件內(nèi)嵌的webvie...

    王笑朝 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<