最近开发app内嵌h5活动页面,考虑适配各个机型就用rem来做的,以往自带浏览器测试都是适配很完美,微信app中测试也没问题,但是红米Note7Pro在我司的app测试兼容性的时候,样式错乱
首先我看页面有点横向拉伸了,元素展示都比正常的要大一些
我通过chrome的👇这个去测试各个app打开的真实场景
1、mac浏览器打开chrome://inspect/#devices
2、手机链接电脑
成功后会展示如下的页面,上面browser是自带浏览器访问,下面是自家app的webview
发现页面根字体大小设置是一样的,每个元素rem值设置的都是一样的,但是盒模型容器的大小却不一样,我司的app里面的大一些,这个问题很明显和根字体大小有关感觉,但是页面的根字体我已经写死了,第一直觉是和系统字体有关。我又做了个测试,用px是否展示有同样的问题,结果展示是正常的。
下面带着猜测找android开发人员沟通:
尝试设置下面这个方法是否可以正常展示,结果是可以的。
Android手机可以给webview配置webview.getSettings().setTextZoom(100)禁止缩放,按照百分百显示。