前端培訓-初級階段-場景實戰（2019-05-23）-移動端適配bug

時間 2019-11-08

原文原文鏈接

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。html

場景實戰這塊內容每一個人的內容都不同。因此最近的更新基本都是我遇到並解決掉的問題。後期會把他們的內容貼地址。前端

今天咱們要講什麼？

flexible 適配方案
flexible 適配方案（放大ios中的vConsole）
flexible 適配方案遭遇放大手機字體大小
主流移動端適配方案（）

flexible 適配方案

flexible 是什麼

amfe/lib-flexible 是手淘的可伸縮佈局方案，學習的話能夠點進去，都是中文的，我就不用複製了吧。ios

flexible 原理

它是把屏幕分紅了10份，1份==1rem。如750/10=75。
以後在 <html> 標籤上增長 data-dpr屬性和 font-size樣式。而後咱們就能夠快樂的使用rem來基於根節點設置了。git

flexible 注意事項

若是頁面有 viewprot 他會使用頁面舊有的。
flexible 設置了一個最大值（75），這樣出來在頁面中看到的效果就是居左750設計稿的樣式。
基於第二點，在部分曲面屏手機上或者大屏幕手機（三星 note8）上，會出現右邊出現大片空白。解決方案以下github
1. 單位改爲vw。（其實就是換方案了，flexible官方也建議換了）
2. 設置父級，而後居中。這樣就兩邊空白同樣了。基本能夠接受。

flexible 適配方案（放大ios中的vConsole）

由於默認 flexible 是根據系統縮放的。咱們爲了測試方便，咱們能夠人爲設置一下<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">。
注意以上方案上線時記得去掉。不然部分小頁面會出問題。segmentfault

flexible 適配方案遭遇放大手機字體大小

由於我司歷史產品緣由，有部分老年用戶（不說老年了，我爸也是調）。由於手機字體過小，調節了手機的字體大小和字體縮放大小。
這就致使基礎值被異常的放大了，頁面顯示亂了。app

修改系統字體大小的解決方案

客戶端設置（網上查的，由於客戶端大哥不給改，且須要發版。因此我沒試）
vw 方案，我不用字體大小還不行嗎？嗯，這個方案的確能夠。

既然你放大了，那我給你縮小不就行了。dom

獲取全部標籤，而後給 font-size 縮小。你別說，這個方案還真行。
可是這個方法太恐怖了。並且後續節點不可控

修改 flexible 增長 zoom 的控制。嗯，完美解決。佈局

;(function(win, lib) {
    // 默認1:1
    var zoom = 1;
    try{
        // 構建一個真實的DOM
        var dom = document.createElement('vv-ln-test-fontsize');
        // 設置爲一個理想值
        dom.style.fontSize = '16px'
        // 追加到DOM樹中
        document.head.appendChild(dom)
        // 獲取理想值和實際值的比例
        zoom = 16/parseFloat(window.getComputedStyle(dom).fontSize);
        console.log(zoom, document.documentElement.style.fontSize)
    }catch(e){
        console.log(e)
    }
    var vv_fontSizeZoom = lib.vv_fontSizeZoom || (lib.vv_fontSizeZoom = zoom);
})(window, window['lib'] || (window['lib'] = {}));

function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 750) {
        width = 750 * dpr;
    }
    var rem = width / 10 * lib.vv_fontSizeZoom;//計算值進行比例換算
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}