flexiable.js 研究

最近公司有同事在移动端网页用到flexiable.js

     if (isIPhone) {
    // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
    if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
    dpr = 3;
    } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
    dpr = 2;
    } else {
    dpr = 1;
    }
    } else {
    // 其他设备下,仍旧使用1倍的方案
    dpr = 1;
    }

此段代码如果ua不包含“iphone”,那么采用1dpr,理由是

淘宝的做法是只管iOS,安卓一律把dpr设为1,官方的说法是安卓的厂商会自己修改dpr,导致安卓上的 window. devicePixelRatio 是假的。

出处 但如果安卓的devicePixelRatio 是真实的且大于1则没有适用此方案。 再看另一处代码,

     if (metaEl) {
    console.warn('将根据已有的meta标签来设置缩放比例');
    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
    if (match) {
    scale = parseFloat(match[1]);
    dpr = parseInt(1 / scale);
    }
    }

如果已经自己设置了meta viewport initial-scale=1.0 则scale为1,dpr也只能为1。 如果可根据devicePixelRatio动态设置initial-scale那么可解决1px边框的问题,但以上两种情况下scale只能为1. 再接着看另一处

    function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
    width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
    }

如果width / dpr > 540 则分辨率宽度按540处理,然而我们结合友盟指数来看,540已经不在友盟的统计范围,也就是排除在主流分辨率之外了。也就是说在目前主流分辨率下html font-size就是54px,并且这里存在的问题是参照值应该取设计稿的宽度(px)而不是固定540,如果想要灵活地根据设计稿来设置最大宽度可以使用hotcss,与flexiable是类似方案在meta上可设置max-width,且scss,less上也可以设置设计稿的宽度。 那么flexiable还适用于现在的开发么?结合hotcss所给出的案例地址还有网易新闻来看还是有几个案例在使用的,然而天猫和淘宝本身没在使用,那么此时想问为什么? 我先回答flexiable是怎么解决适配的问题吧 1,根据不同的dpr设置html元素的基础字号像素为单位,以此来达到在元素上设置rem为单位的尺寸时元素大小边距等的缩放。 2,由于1动态改变了html基础字号,我们又需要[data-dpr]来设置不同dpr下元素字号,这是为1解决的问题而产生的新问题买单。 3,根据不同的dpr设置scale,解决dpr>1时1px边框会比dpr=1时稍粗的问题,但是前面我们看到scale在大多数情况下就是1. 我们再来看看其他问题ios使用scale后,调用高德地图,地图也会被缩掉,怎么解决? 微信二维码识别相关 这两个问题最后给的解决办法还是将dpr设置为1来解决。 那么flexiable实际上的作用只有我上面列的三项中的第一项了。我再来回答为什么不用flexiable; 1,1像素边框的问题可以用

    .scale{
    position: relative;
    }
    .scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #ddd;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
    }

或者干脆不解决。对此我的观点是1px到底采用1个,2个还是N个物理像素那是浏览器所采用的方案。天猫和淘宝现在都宽高边距用px了,即便结果是普通安卓机上和retina上元素看起来大小不一样。 2,对于页面上较多绝对定位的,我们可以直接<meta name="viewport" content="width:设计稿尺寸(px)"> 来解决。 那么flexiable还有理由用吗? 有,如果你的设计稿尺寸是540或者你灵活地根据设计稿设置了最大宽度,那么屏幕宽度对于小于设计稿宽度的设备,基于动态的设置html font-size,元素的尺寸和边距可以很好的缩小。当然这里的前提是设计稿的宽度应是主流移动设备的屏幕宽度,如果设计稿的宽度就小那么你想想你到底用到flexiable的哪一点吧?