flexiable.js 研究

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 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则没有适用此方案。 再看另一处代码,

1
2
3
4
5
6
7
8
 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. 再接着看另一处

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    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处理,然而我们结合[友盟指数](http://tip.umeng.com/uploads/data_report/mobile_phone_report_.pdf)来看,540已经不在友盟的统计范围,也就是排除在主流分辨率之外了。也就是说在目前主流分辨率下html font-size就是54px,并且这里存在的问题是参照值应该取设计稿的宽度(px)而不是固定540,如果想要灵活地根据设计稿来设置最大宽度可以使用[hotcss](https://github.com/imochen/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后,调用高德地图,地图也会被缩掉,怎么解决?](https://github.com/amfe/lib-flexible/issues/54) [微信二维码识别相关](https://github.com/amfe/article/issues/17#issuecomment-259130658) 这两个问题最后给的解决办法还是将dpr设置为1来解决。 那么flexiable实际上的作用只有我上面列的三项中的第一项了。我再来回答为什么不用flexiable; 1,1像素边框的问题可以用

``` css
.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的哪一点吧?

记一次mysql server 错误 分布式测试平台构思
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×