首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置htmlfont-size,一切都比较完美。

这时候,你自信满满的将h5地址交给了APP工程师,做了一个WEBVIEW嵌套,然后就顺利交工了。

测试组在一堆手机中测试APP,突然,在某个手机上打开,你的页面布局了乱了,字变大或者变小,总之很奇葩。

你怀疑是APP的问题,但是客户端死活不承认。你在该手机浏览器中查看,确保没有一毛钱问题,也死活不承认是你的问题。于是测试人员对你俩不死不休的要求修改。于是,客户端给你加了调试工具后,你打开chrome进行调试,发现一个非常非常奇葩的问题:

我明明设置的html字号是100px,为什么在APP中就变成了86(或者其他数字),你找遍所有的代码,都没有发现这个86是从哪里来的,你快疯了!!找了N多人帮忙,都没能解决这个问题!!我很希望能够告诉你,赶紧来看我这篇博文,因为,你现在经历的一切,我TM刚刚经历过~~

好,你怎么也不会想到是手机设置字体大小造成的。因为默认浏览器中的内容是不受系统字体大小设置控制的,至少我遇到的几台手机都是这样的情况。但是APP不一样,APP是受那个玩意儿控制的!!

问题描述清楚了,出现这个问题,有以下因素

  1. 你的页面采用了rem单位,并且是采用js动态计算htmlfont-size
  2. 你的页面被加在了APP中的webview
  3. 这该死的手机被重设了字体大小

解决方法

一般,我们动态计算好htmlfont-size之后,我们就啥都不干了,就走了。但是,我们现在知道了,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下htmlfont-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";
}
}
 
 
~~其实是一种利用符号进行的类型转换,转换成数字类型

~~true == 1
~~false == 0
~~"" == 0
~~[] == 0 ~~undefined ==0
~~!undefined == 1
~~null == 0
~~!null == 1

解决因为手机设置字体大小导致h5页面在webview中变形的BUG的更多相关文章

  1. 因为手机设置字体大小导致h5页面在webview中变形的BUG

    出现这个问题,有以下因素 你的页面采用了rem单位,并且是采用js动态计算html的font-size你的页面被加在了APP中的webview中这该死的手机被重设了字体大小解决方法一般,我们动态计算好 ...

  2. 安卓下设置系统字体大小影响H5页面布局

    问题描述: 调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉 问题分析: 因为用户调整了系统字体的大小,修改了根节点和body节点的font-siz ...

  3. rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题

    rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题 判断是特殊机型,做特殊处理. var u=navigator.userAgent; if($(window).width() ...

  4. 【转】CSS3的REM设置字体大小

    rem 长度单位   在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...

  5. CSS3的REM设置字体大小

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...

  6. eclipse怎么设置字体大小

    eclipse怎么设置字体大小

  7. 【转】eclipse怎么设置字体大小

    原文网址:http://jingyan.baidu.com/article/f96699bb9442f3894e3c1b15.html 1. 打开eclipse,找到window 2.  点击后在下拉 ...

  8. android studio 更改背景和设置字体大小

    1,设置字体大小 2,设置背景主题

  9. EditPlus 3设置字体大小

    EditPlus设置字体大小 tools ---> preferences ---> fonts

随机推荐

  1. 4-1eclipse & 4-2在eclipse下开发Java

    ecplise是一款继承的开发工具,可以开发我们的java程序. 下载地址: https://www.eclipse.org/downloads/ 视频中ecplise的版本 安装Ecplise: 默 ...

  2. 新版蜀山剑侠传3D立体格斗全方位剖析

    国人终极格斗<蜀山剑侠传>,突破传统横版格斗"二次元"瓶颈,率先开辟3D立体横版格斗网游先河,实现"有纬度"的空间化立体式全景3D战斗体验!游戏大量 ...

  3. 51nod1093(推公式&找規律)

    題目鏈接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1093 題意:中文題誒- 思路:xjb 一開始死活想不出怎麼將一 ...

  4. uoj#275. 【清华集训2016】组合数问题(数位dp)

    传送门 假设有\(k|{n\choose m}\),因为\(n!\)中质因子\(k\)的次数为\(S(n)=\left\lfloor\frac{n}{k}\right\rfloor+\left\lfl ...

  5. [Xcode 实际操作]八、网络与多线程-(1)使用Reachability类库检测网络的连接状态

    目录:[Swift]Xcode实际操作 本文将演示如何使用Reachability网络状态检测库,检测设备的网络连接状态. 需要下载一个开源的类库:[ashleymills/Reachability. ...

  6. [Xcode 实际操作]八、网络与多线程-(18)PerformSelector消息处理方法:由运行时系统,负责去调用对象的指定方法

    目录:[Swift]Xcode实际操作 本文将演示PerformSelector消息处理方法. 在项目文件夹上点击鼠标右键弹出文件菜单. [New File]->[Swift File]-> ...

  7. ssh 下载文件以及上传文件到服务器

    https://blog.csdn.net/jackghq/article/details/64124062 scp john@192.168.1.100:~/Desktop/MHN_error_so ...

  8. [Noip模拟题]统计方案​

    题目并不难,想一下就会了,我真的智商持续下降,取模情况下做除法我都没想到逆元. 总之想到逆元就好写了,还是\(meet\ in\ the\ middle\)裸题,数组开不下用\(hash/map\)存 ...

  9. python 的sorted函数

    sorted函数:sorted(iterable,key,reverse) 其中iterable表示可以迭代的对象,  key是一个函数,用来选取参与比较的元素,reverse则是用来指定排序是倒序还 ...

  10. JToken和JObject有什么区别

    JObject  用于操作JSON对象JArray    用语操作JSON数组JValue   表示数组中的值JProperty 表示对象中的属性,以"key/value"形式JT ...