安卓下设置系统字体大小影响H5页面布局

问题描述:

调整好的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原理不是很了解的同学可以参考:http://www.cnblogs.com/noobfly/p/6207832.html