cordova 安卓修改系统字体不影响页面解决方法

在开发基于Cordova的H5应用时，可能会遇到一个棘手的问题：当用户更改安卓系统的字体大小时，H5页面的布局会受到影响。这个问题主要由两方面引起：一是字体大小的变化，二是单位长度的改变。本文将详细解释这个问题并提供解决方案。 问题的核心在于用户在系统设置中调整字体大小，这会导致Android系统对H5页面中的`body`元素的`font-size`进行相应调整。由于许多H5页面设计中，字体大小通常基于`rem`或`em`单位，而这些单位与根元素（通常是`html`）或`body`元素的`font-size`紧密相关。当`body`的`font-size`改变时，使用`em`单位的字体大小也会随之改变，从而破坏页面布局。 然而，令人困惑的是，尽管`body`的`font-size`确实发生了变化，但根元素的`font-size`却没有改变。这是因为`rem`单位是相对于根元素的`font-size`，而不是`body`。尽管如此，页面上的长度（如使用`px`单位的元素宽度）却仍然受到影响，这是由于系统在用户更改字体大小时，会动态调整1像素（`px`）所代表的实际像素值，导致了像素与实际尺寸的不匹配。 为了确认这个问题，开发者可以通过在页面上添加按钮，点击后弹出根节点和`body`节点的`font-size`值来观察其变化。当发现`body`的`font-size`变化而根节点的`font-size`未变时，可以进一步确认问题的存在。 针对这个问题，Android提供了`WebView`的一个设置方法，即`webview.getSettings().setTextZoom(100)`，用于设置Webview内部文本的缩放比例。这个方法实际上设置了以`px`为单位的字体缩放比例，将其设定为100%可以确保用户在系统层面的字体大小调整不会影响到Webview内的字体呈现。同时，由于`px`单位的缩放比例被固定，长度的计算也会保持一致，从而解决了长度显示异常的问题。 对于那些不太了解`em`和`rem`工作原理的开发者，建议参考相关文章（如http://www.cnblogs.com/noobfly/p/6207832.html）以深入了解这两种单位的用法和相互关系。 解决Cordova安卓应用内H5页面因系统字体更改而布局混乱的问题，关键在于通过`setTextZoom(100)`方法，独立控制Webview内的字体缩放，以此隔离用户系统设置对H5页面的影响。这样，无论用户如何调整系统字体大小，H5页面的布局和字体大小都能保持预期效果，提供稳定一致的用户体验。