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