解决安卓字体偏移:页面整体缩放
程序员文章站
2022-05-04 13:23:25
在h5中实现一些小标签、按钮的时候,很容易发现部分安卓机型上的字体显示有问题,总会向上偏移2px左右。这是设置padding或line-height无法修复的,与rem也无关,即使在字体大于12px时依然存在。下图来自于网友的分享,从左到右依次是显示正常的苹果、显示正常的安卓、显示异常的安卓: 可能 ......
在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,都不用换算的。
下一篇: 纯JS实现前端动态分页码