zhilizhili-ui 拋棄amfe flexible佈局 去構建本身的佈局

h5頁面要適配更多的設備

google 團隊的device連接

阿里amfe的有一個flexible方案

amfe 把 android 直接定位1dpr 這是爲何

爲何要用navigator判斷

衆所周知 ios 用的是 safari

因此只要知道是不是safari 就能夠了

var isSafari = /constructor/i.test(window.HTMLElement);

不是safari 而且是webkit 能夠認爲是android的瀏覽器

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

根據dpr 改變initial-scale=1 這沒問題 是不錯的想法 可是提出一個方案時 不考慮android用戶
僅僅只根據本身的業務要求 就被你們承認 這實在說不過去

rem 加 vw vh 纔是王道

首先android不少瀏覽器不能加載vw vh這個必需要兼容

徐飛的rem layout能夠兼容

sass 使用 一個rem庫

連接

爲了加快佈局速度

咱們能夠預設定一些值

$rem-baseline: 16px;

html {
    font-size: $rem-baseline;
}

@include screen("320px", "320px") {
    html {
        font-size: 16px !important;
    }
}

@include screen("360px", "360px") {
    html {
        font-size: 18px !important;
    }
}

@include screen("375px", "375px") {
    html {
        font-size: 18.75px !important;
    }
}

@include screen("412px", "412px") {
    html {
        font-size: 20.6px !important;
    }
}

@include screen("414px", "414px") {
    html {
        font-size: 20.7px !important;
    }
}

固然 rem 也會有反應不及時的問題 因此最好快速進入vw vh時代

第一 全部要兼容的css都必須經過預處理 放置在head font-family裏

方便json序列化 能夠隨時改變 真正實現全動態

var content = window.getComputedStyle(
    document.querySelector('head')
).fontFamily.replace(/\\/g, "").replace(/'/g, '');

在轉變成 px

這樣連rem不許確的問題都解決

並且android 所用的dp 其實和vw 是效果相同的

因此拋棄filexible吧 使用vw