问题描述:
调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉
问题分析:
因为用户调整了系统字体的大小,修改了根节点和body节点的font-size,而我的单位和字体大小采用的是rem和em,所以根节点与body节点font-size的改变肯定会影响到我的字体的大小和单位长度的展现
问题确认:
初步分析问题后,需要真实的模拟环境,看看是否如我所说,根节点的font-size和body节点的font-size真的改变了,我在页面上面添加一个按钮,点击弹出根节点的font-size和body节点的font-size.经确认,body节点的font-size确实改变了,但是根节点的font-size并没有改变,这确定一个问题,因为我字体采用的是em,em单位自然和body节点的font-size有关,但是我的长度采用的是rem,而rem只和根节点的font-size有关,既然根节点的font-size并没有改变,那为什么我h5里面的长度改变了呢
问题继续查找:
正在我苦思冥想之际,突然发现我的一个元素宽度设置为360px(注意这个时候我的手机也是360px),而这个元素的宽度竟然不是撑满全屏,由此可以推断,当用户修改系统字体大小的时候,回动态修改1px所代表的实际像素。这个就属于系统级的了,如果是安卓app原生开发倒是可以采用dp为单位规避这个问题,但是我们h5只能用px
问题再确认:
首先是两个问题:
1-字体大小改变,因为body节点font-size的变化影响到我以em为单位的字体大小
2-单位长度改变,因为用户调整系统字体大小后,改变了在系统内部1px所代表的实际像素,所以使得我的长度与实际长度不服
问题解决:
如果有一个方法可以使得用户设置字体大小不干扰到我h5内部的字体就好了,果然,安卓提供了一个方法:webview.getSettings().setTextZoom(100),这个方法是设置webview内部字体的缩放比例,而字体单位是px,它其实设置的是px的缩放比例,我们通过强制设置为100%,来使得用户的外部设置干扰不到我们内部webview的字体大小呈现。而因为限制了px的缩放比例,我们的长度也最终得以正常呈现。
注:对于em和ren原理不是很了解的同学可以参考: