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

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

首先,我们做了一个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";
    }
}

恶心的。。。不想再多言。。。

祝好,不谢!

2017年10月31日补充 安卓端设置 webview 解决此问题

之前我用JS解决这个问题的方法虽然能够在一定程度上解决问题,但是还是很不优雅,也不方便。

今天看到有网友给我留言,说在安卓端设置 webview 一个参数就能解决问题。原话如下:

解决办法:安卓客户端通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放,按照百分百显示。

经过测试,确定,这个设置是能够完美解决问题的。

所以,如果你现在看到这篇文章,尝试用我的代码来解决问题,更好的做法,是去找安卓客户端开发工程师,让他增加这样一个参数。

如果不方便,再来用我的JS代码解决。

PS:留言中有人说我的代码不能解决问题。我的代码肯定是能够解决问题的。但是需要根据你的项目自己去调整算法。我的默认设置是给 html 设置字体大小为 100px

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SDNLAB

软件定义光网络故障恢复与资源分配

前言 传统IP分组交换网使用域内路由协议(Interior Gateway Protocol,IGP)和域间路由协议(Border Gateway Protoc...

37290
来自专栏玉树芝兰

如何免费云端运行Python深度学习框架?

想运行TuriCreate,却没有苹果电脑,也没有Linux使用经验,怎么办?用上这款云端应用,让你免安装Python运行环境。一分钱不用花,以高性能GPU,轻...

53910
来自专栏xingoo, 一个梦想做发明家的程序员

我的AI之路 —— OCR文字识别快速体验版

还记得前一阵某小盆友拿过来一个全是图片的ppt,让我把里面的文字给抠出来(我当时很震惊!!!),随后在网上随便找了个OCR的在线文档转换软件,就给转过来了——这...

1K20
来自专栏大数据

UC Berkeley提出新型分布式执行框架Ray:有望取代Spark

译者|马卓奇 编辑|Natalie AI 前线导读:下一代人工智能应用程序需要不断地与环境交互,并从这些交互中学习。这对系统的性能和灵活性提出了新的要求,而现有...

47080
来自专栏数据和云

Oracle Database 18c 的10大新特性一览

在 2017 Oracle OpenWorld大会上,关于 Oracle 18c 的一系列新特性已经被披露出来,借助分散在各个会场的公开分享主题和内容、OOW提...

637110
来自专栏ThoughtWorks

TW洞见 | 可视化你的足迹

今日洞见 文章作者来自ThoughtWorks:邱俊涛。 本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司所有,任何媒体、网站或个...

400120
来自专栏灯塔大数据

每周学点大数据 | No.77 众包算法实践——成为众包工人

编者按:灯塔大数据将每周持续推出《从零开始学大数据算法》的连载,本书为哈尔滨工业大学著名教授王宏志老师的扛鼎力作,以对话的形式深入浅出的从何为大数据说到大数据算...

508110
来自专栏菩提树下的杨过

Flash/Flex学习笔记(12):FMS 3.5之如何做视频实时直播

硬件条件:一个摄像头 + 一台FMS服务器即可 原理:摄像头实时采集视频源,然后推送到FMS服务器,其它客户从FMS上获取视频流。 需要做二个fla,一个用于向...

19980
来自专栏北京马哥教育

知乎美女挖掘指南--Python实现自动化图片抓取、颜值评分

声明:文中所有文字、图片以及相关外链中直接或间接、明示或暗示涉及性别、颜值分数等信息全部由相关人脸检测接口给出。无任何客观性,仅供参考。 1 数据源 知乎 话题...

55060
来自专栏HBStream流媒体与音视频技术

设计并实现同时支持多种视频格式的流媒体点播系统

37950

扫码关注云+社区

领取腾讯云代金券