鸦杀's Blog

红米魅族12px问题

2016-06-04

这也是在上周做需求的时候遇到的问题,在此记录下。

引子

我们在做h5页面时,字体用的是px方案,根据不同dpr设置相应的px值



































































dprpx
10.5
2 (5,6)1
2.5(mx3)2.5/2
2.75(小米note)2.75/2
3(6plus)3/2
4(三星note4)2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.px2px(@name, @px){  
@{name}: round(@px / 2) * 1px;
[data-dpr="2"] & {
@{name}: @px * 1px;
}
// for mx3
[data-dpr="2.5"] & {
@{name}: round(@px * 2.5 / 2) * 1px;
}
// for 小米note
[data-dpr="2.75"] & {
@{name}: round(@px * 2.75 / 2) * 1px;
}
[data-dpr="3"] & {
@{name}: round(@px / 2 * 3) * 1px
}
// for 三星note4
[data-dpr="4"] & {
@{name}: @px * 2px;
}
}

在html中,通过内联的js,将页面划分为16等分,1rem为页面宽度/16,初始字体为页面宽度/16 px。添加data-dpr属性,动态创建meta标签,禁止缩放,根据data-dpr的值,设置scale值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
! function(a) {  
function b() {
a.rem = f.getBoundingClientRect().width / 16, f.style.fontSize = a.rem + "px"
}
var c, d = a.navigator.appVersion.match(/iphone/gi) ? a.devicePixelRatio : 1,
e = 1 / d,
f = document.documentElement,
g = document.createElement("meta");
if (a.dpr = d, a.addEventListener("resize", function() {
clearTimeout(c), c = setTimeout(b, 300)
}, !1), a.addEventListener("pageshow", function(a) {
a.persisted && (clearTimeout(c), c = setTimeout(b, 300))
}, !1), f.setAttribute("data-dpr", d), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + e + ", maximum-scale=" + e + ", minimum-scale=" + e + ", user-scalable=no"), f.firstElementChild) f.firstElementChild.appendChild(g);
else {
var h = document.createElement("div");
h.appendChild(g), document.write(h.innerHTML)
}
b()
}(window);

注意:简单粗暴的将Android的dpr都设为了1…

在css的方案中,我们设置了dpr的不同值,1,2,2.5,2.75,3,4.。。。但是由于html中计算dpr简单粗暴,对于Android而言,就是使用px方案时,字体/2.。。

问题

回到正题,我的需求。。。

UI提供的设计稿中,tag标签的字体是20px,padding是4px。使用px方案时,在Android中实际就是10px了。但是10px在一些设备的支持并不好,毕竟它小于12px。红米和魅族在渲染的时候,就会出现上边距小于下边距的情况。就像是在行高不变的情况下字体却被放大了。。。

解决办法

我首先想到的是rem方案。我们的设计稿是750px 。假定UI给的字体还是20px。

页面实际计算出来的font-sie为:20/46.875*(html页面宽度/16),只要页面宽度大于450,计算出来的font-size应该会大于12px。其实现在市面上的手机,页面宽度都是大于480的。。。当然这样有一个不好的问题就是在大屏幕的安卓机上,字体就会比px方案变大很多。
参考:http://screensiz.es/phone

方案2,使用transform:scale()缩放,仍然使用px方案。保证dpr计算后的字体最小是12px,然后用缩放解决。
.px2px(font-size,24);—>安卓下计算结果是12px,transform:scale(0.8)。12*0.8=19.6px。约等于20px。当然这里需要注意的是字体不能随意乱放大,缩放可能会引起一些布局错乱的问题啦。

扫描二维码,分享此文章