安卓微信下的碰到一点诡异问题

昨天在测试公司的一个项目的时候,发现在安卓微信端内嵌浏览器下,会出现这样
截图1

我擦,为毛手机号会跑到最左边去???!!!经过测试在iPhone5的微信端是没有问题,在部分安卓的微信浏览器下,就会出现这个问题。更诡异的是,字母或者文字都不会出现这个bug,当我改动这个手机号的时候,发觉在10位-11位会出现这个bug,其余位数是不会的,真是百撕不得骑姐啊~~ 表情

今天来了之后,继续研究昨天的bug,由于是在微信端,一开始不知道有啥好的调试办法,所以用了绝对定位去控制那个手机号。虽然问题暂时得到解决了,但是,却想不通啊,这是为毛!!为毛!!到底为毛!!。然后在群里(javascript div css前端群 198414585)探讨了下,@菊花@乱码大人纷纷建言献策,@乱码大人说可以去找下微信X5的调试,那么我就开始各种找咯。各种谷歌,百度。一开始没找到,后来改了下关键词 微信调试 恩,终于找到了,哝,就是这个
截图2
当然,有的童鞋可能是百度,出来的结果就变成这样了(什么鬼)……
截图3
所以,天朝哎……这里顺便安利下,我用的科学上网的工具:ShadowSocks,简称SS,当然,服务是收费的,具体可以看这里
好了,打开微信调试
按照上面的教程,电脑要安装QQ浏览器最新版

如何安装?

  1. 安装QQ浏览器。windows用户可下载QQ浏览器9最新版,mac用户请下载并安装mac版QQ浏览器,浏览器版本号不低于3.8
  2. 进入应用中心,搜索并安装“微信调试工具”
    截图4
    截图5

    这个工具能做什么?

    远程调试微信内网页 Android手机打开DEBUG模式,并通过USB先连接电脑以后,可以在PC端远程调试微信内WEB网页,支持断点调试微信JS API。
    截图6
    使用方法参考: 如何开启微信网页远程调试
    这个就是工具的介绍了。
    接下来 开启微信网页远程调试。
    由于公司的测试机始终登录不上微信,我就只好拿自己的红米note当做测试机了。

开启网页调试教程

开启网页调试步骤

  1. 首先打开调试的微信网页,并且微信版本不低于6.2.4(下图以项目网页为例)
    截图7
  2. 插件->网页调试->”开启调试”按钮
    确认手机通过USB数据线连接电脑,并已开启调试模式(点此查询如何开启调试模式)
    确认手机已安装TBS环境(点击查看安装TBS环境教程)
    截图8
  3. 微信上打开的网页会在按钮下方展示(以微信红包网页为例)
    截图9
    点击后打开熟悉的调试界面,你们懂的
    截图10

哝,问题看到了吧,无缘无故都出了一个

1
<a href="faketel:15875460444" style="text-decoration: none;color: rgba(173,173,173);">15875460444</a>

可我的dom结构却只有这样

1
2
3
4
<div class="infoCont">
<span class="fl">手机号</span>
<em class="tel fl">15875460426</em>
</div>

也就是说,他在我的手机号上面生成了a,由于我的a写了一个绝对定位的属性,所以导致了会跑到最左边。然后把CSS改了下,bug就解决了。faketel这个东西我在群里和菊花探讨了下,估计是微信自动忽略页面中的数字识别为电话号码,当然这只是我的猜测。没有查到相关的资料。
好了,今天的分享就到这里。不足之处,欢迎指出
截图11