解决安卓字体偏移：页面整体缩放

　　在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，都不用换算的。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有