安卓下设置系统字体大小影响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