改变手机字体大小导致APP webview 中H5页面布局错误的问题

Daming 2020-06-07
0条评论 1,390 次浏览
Daming 2020-06-070条评论 1,390 次浏览

今天测试反馈 APP 中 的 H5 在一台小米8上显示有问题,布局错误 超出屏幕。

首先发现怪异的现象是,所有css等资源都已正常加载,但是在手机默认浏览器、qq、uc等都是正常的,在APP中就是布局错误,初步怀疑是APP的问题,但是APP那边反馈没有问题~~~

刚好同事有一台小米8,但在同事的机器上H5显示正常。在反复对比两台机器各项参数(APP版本、手机系统版本、安卓版本、webview版本等等)都是一致没有区别后,心态确实有点崩

最后两台手机对比着审查元素发现H5中 html的字号大小不一致,进而发现其中一台小米8的手机字体大小不是默认大小。将字体恢复为系统默认大小后 一切正常~~~

网上查阅资料发现很多人遇到了这个问题,在刚开始没有想到是字体大小的原因 是因为在手机默认浏览器上是没问题的,But… APP里的webview 就受到影响,这就是坑的 地方。

总结出现此问题会是有以下因素:

1.页面采用了rem单位,并且是采用js动态计算html的font-size
2.页面在APP的webview中
3.手机被重设了字体大小

解决方法:

安卓客户端通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放,按照百分百显示。

4+

发表评论

电子邮件地址不会被公开。