都匀网站开发,做网店运营新手入门教程,网站开发项目组团队,新手学做百度联盟网站在h5中实现一些小标签、按钮的时候#xff0c;很容易发现部分安卓机型上的字体显示有问题#xff0c;总会向上偏移2px左右。这是设置padding或line-height无法修复的#xff0c;与rem也无关#xff0c;即使在字体大于12px时依然存在。下图来自于网友的分享#xff0c;从左… 在h5中实现一些小标签、按钮的时候很容易发现部分安卓机型上的字体显示有问题总会向上偏移2px左右。这是设置padding或line-height无法修复的与rem也无关即使在字体大于12px时依然存在。下图来自于网友的分享从左到右依次是显示正常的苹果、显示正常的安卓、显示异常的安卓 可能是部分机型对webview字体的渲染机制存在问题导致所有字体都偏移只是在小图标上看起来更明显罢了。 transform缩放对此有较好的修复作用但是对每个有文字的地方都应用scale也太麻烦了。在h5页面头部通常都会写上viewport标签我们可以将viewport的scale设为0.5来达到页面整体缩放的效果也可以修正字体偏移。 meta nameviewport contentwidthdevice-width,initial-scale0.5, maximum-scale0.5, user-scalableno 如果从UI那儿拿到的高保真效果图的分辨率宽度是750但是一般机型渲染页面的逻辑分辨率也就三四百于是你想以375的宽度为基准来写页面。375/7500.5设置viewport的scale为0.5之后就可以从图上量多少长宽就在代码里写多少px都不用换算的。
更多专业前端知识请上
【猿2048】www.mk2048.com
