狂,孟尝君出记,汕头一模
在h5中实现一些小标签、按钮的时候，很容易发现部分安卓机型上的字体显示有问题，总会向上偏移2px左右。这是设置padding或line-height无法修复的，与rem也无关，即使在字体大于12px时依然存在。下图来自于网友的分享，从左到右依次是显示正常的苹果、显示正常的安卓、显示异常的安卓：
可能是部分机型对webview字体的渲染机制存在问题，导致所有字体都偏移，只是在小图标上看起来更明显罢了。
transform缩放对此有较好的修复作用，但是对每个有文字的地方都应用scale也太麻烦了。在h5页面头部通常都会写上viewport标签，我们可以将viewport的scale设为0.5来达到页面整体缩放的效果，也可以修正字体偏移。
<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, user-scalable=no">
如果从ui那儿拿到的高保真效果图的分辨率宽度是750，但是一般机型渲染页面的逻辑分辨率也就三四百，于是你想以375的宽度为基准来写页面。375/750=0.5，设置viewport的scale为0.5之后，就可以从图上量多少长宽就在代码里写多少px，都不用换算的。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
我要评论
网友评论