解决因为手机设置字体大小导致h5页面在webview中变形的bug
来源:互联网 发布:ubuntu使用手册 编辑:程序博客网 时间:2024/06/05 05:35
首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题。我们采用了rem
单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html
的font-size
,一切都比较完美。
这时候,你自信满满的将h5
地址交给了APP工程师,做了一个WEBVIEW
嵌套,然后就顺利交工了。
测试组在一堆手机中测试APP
,突然,在某个手机上打开,你的页面布局了乱了,字变大或者变小,总之很奇葩。
你怀疑是APP
的问题,但是客户端死活不承认。你在该手机浏览器中查看,确保没有一毛钱问题,也死活不承认是你的问题。于是测试人员对你俩不死不休的要求修改。于是,客户端给你加了调试工具后,你打开chrome
进行调试,发现一个非常非常奇葩的问题:
我明明设置的html
字号是100px
,为什么在APP
中就变成了86
(或者其他数字),你找遍所有的代码,都没有发现这个86
是从哪里来的,你快疯了!!找了N多人帮忙,都没能解决这个问题!!我很希望能够告诉你,赶紧来看我这篇博文,因为,你现在经历的一切,我TM刚刚经历过~~
好,你怎么也不会想到是手机设置字体大小造成的。因为默认浏览器中的内容是不受系统字体大小设置控制的,至少我遇到的几台手机都是这样的情况。但是APP不一样,APP是受那个玩意儿控制的!!
问题描述清楚了,出现这个问题,有以下因素
- 你的页面采用了
rem
单位,并且是采用js
动态计算html
的font-size
- 你的页面被加在了APP中的
webview
中 - 这该死的手机被重设了字体大小
解决方法
一般,我们动态计算好html
的font-size
之后,我们就啥都不干了,就走了。但是,我们现在知道了,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html
的font-size
,看看实际的这个值,和我们设置的是不是一样。如果不一样,就要根据比例再设置一次。
以下是我的完整代码:
function htmlFontSize(){ var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); var width = w > h ? h : w; width = width > 720 ? 720 : width var fz = ~~(width*100000/36)/10000 document.getElementsByTagName(“html”)[0].style.cssText = ‘font-size: ‘ + fz +“px”; var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName(“html”)[0]).fontSize.replace(‘px’,”)*10000)/10000 if (fz !== realfz) { document.getElementsByTagName(“html”)[0].style.cssText = ‘font-size: ‘ + fz * (fz / realfz) +“px”; } }
- 解决因为手机设置字体大小导致h5页面在webview中变形的BUG
- 解决因为手机设置字体大小导致h5页面在webview中变形的BUG
- 解决因为手机设置字体大小导致h5页面在webview中变形的bug
- 解决在Vue项目中时常因为代码缩进导致页面报错的问题
- webView--Android中webView加载H5时,H5页面在不同的手机可能出现文字或者图标类似换行的现象
- 设置webview 的字体大小,字体颜色和页面背景
- android应用因为加入js而导致webview一直在加载中的bug解决方案
- android应用因为加入js而导致webview一直在加载中的bug解决方案
- webView设置字体大小以及文章末尾的留白解决
- android webview字体大小的设置
- android webview字体大小的设置
- android webview字体大小的设置
- 两种解决修改android手机设置中字体大小后系统布局混乱的方法
- 解决 hybird 应用中重复获取 WebView,导致页面元素无法识别的问题
- 解决 hybird 应用中重复获取 WebView,导致页面元素无法识别的问题
- 解决 hybird 应用中重复获取 WebView,导致页面元素无法识别的问题
- Android中使用WebView加载H5页面的方法
- android webview中嵌套的h5页面下载apk
- [kaggle系列 二] 使用决策树判断是否能从泰坦尼克号生还
- win7+ubuntu16.04+ROSkinetic安装
- Java8利用stream对集合的复杂操作(顺序处理,并行处理)
- 我的跳槽笔记
- 推荐系统
- 解决因为手机设置字体大小导致h5页面在webview中变形的bug
- 非常好的SQL练习题
- An Introduction to Flask 8~11
- 2017 ACM-ICPC 亚洲区(西安赛区)网络赛 Coin (概率公式+快速幂)
- 使用ajax提交form表单,包括ajax文件上传的两种方式
- 从零开始前端学习[3]:css+div盒子模型
- Java 基础概念
- \n和\r有什么区别
- 环