手机字体缩放html,手机系统设置字体大小影响h5页面字体

问题描述：

1、我们的h5页面是嵌入到app里面，用webview实现浏览器打开的

2、在手机浏览器打开没有问题

原因：

安卓的webview会出现这个问题，因为webview是手机内置浏览器的sdk封装出来的组件，因此会受手机系统的影响，但是ios的webview不会出现这个问题。

解决方法：

1、同时经过测试发现我们用document.documentElement.html.style.fonSize获取出来的都是48px,但是实际上页面字体变大了，说明1px代表的像素变大了。既然问题出现在安卓，那安卓一定会有相应的解决办法: webview.getSettings().setTextZoom(100),这个方法可以设置webview内部字体的缩放比例,设置为100%也就是按照默认大小来显示，而不会是字体选择中的“大”、“超大”(大于100%)或者“小”(小于100%)。而因为限制了px的缩放比例,我们的长度也最终得以正常呈现。

2、由于我们的app是使用别人的应用，所以让他们去改动会比较麻烦，因此只能我们页面改动：假设你的html fontsize设定为a px，实际显示是b px，但是你想让他显示是a px，因此你需要把html的fontsize调整为a*a/b px这样在系统字体大小变化时你还是可以保持设定的布局大小的。

用window.getComputedStyle(document.querySelector('html'),null).getPropertyValue('font-size')可以获取到实际的大小，像document.documentElement.html.style.fonSize获取的都是一样的设定值而不是具体值。

设定完html的fontsize大小后再获取实际的html大小判断是否一致，如果不一致再设定一次大小为a*a/b即可解决。

具体可以参考：https://www.cnblogs.com/axl234/p/7753187.html

从这篇文章得到的有效信息最多