手机系统设置字体大小影响h5页面字体

您所在的位置:网站首页 手机字体怎样设置变大 手机系统设置字体大小影响h5页面字体

手机系统设置字体大小影响h5页面字体

2023-10-12 18:27| 来源: 网络整理| 查看: 265

问题描述:

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

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

 

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3