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