前端页面中 iOS 版微信长按识别二维码的bug 与解决方案

iOS 版微信(目前为6.2.2版本)内置浏览器中长按识别二维码有一个bug 会导致无法识别,安卓下就可以。本文将为你重现这个bug 并给出实际中的解决方案。

7月1日更新: 建议看完本文再看http://devework.com/weixin-qrcode-bug2.html 一文补充文章。

发现问题

实习的时候要做一个游戏页面的宣传页,里面有两个二维码要让访客长按识别以加入相关公众号。页面做出来后测试,发现在安卓版微信能正常识别,但iOS 版微信(iPhone 或 iPad)皆无法正常识别。出来问题一开头固然是怀疑自己的代码有问题,上网搜索相关资料,尝试以下方案均无法解决:

1、定位方式由absolute 改为传统的margin(据说绝对定位会导致这个问题);

2、修改viewport 上的maximum-scale大于1(网络上看到的解决方案);

3、网络上有说用position: fixed; 定位会导致这个问题,但这个页面css 文件完全无fixed 这个单词。

寻找原因

后来找有经验的同事帮忙看下,发现可识别区域恰巧比正常地方稍微往上一点,而“比正常地方稍微往上一点”是多少呢?经过多次人工检测,发现上文“比正常地方稍微往上一点”的高度正是微信标题栏+系统状态栏的高度(64px)。

做了一个问题重现的页面,地址如下(用iOS 微信6.2 扫描方可重现):

iOS 版微信6.2 中二维码实际可识别区域为蓝色框部分(请用第五个小指在边缘区细心长按)。本人测试设备为iPad mini2+ iOS8.1 +微信6.2.2.17,其他微信版本没有测试;

基本上可以确定是iOS 版微信的本身问题,原因应该是微信客户端在识别二维码的时候忽略了微信标题栏+系统状态栏的高度,而这种bug 的促发貌似也是需要CSS 进行特殊定位的情况下才产生的(特别是absolute 绝对定位)。因为在微信实习的缘故,跟同事了解了下情况,这个bug 早在6.1 版本就出现了,他们有反馈过但到了6.2 都没有修复。所以当前情况应该是先自行hack 下。

6月25日更新:经过与微信 iOS 开发人员的反馈沟通,确定是微信的 bug,据他们的说法目前已经修复,但能否在下一个版本中加入么,就不得而知了。

解决方案

个人在做这个页面时候采取的解决方案是通过将img 标签增大padding 的方式来增大可点击区域(为此padding-bottom 特长)来解决的。

6月25日更新:还有一种解决方法(如下图),即为二维码图片本身增加透明底部背景(前端上访客看不到),增加可接触面积。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

最有效、最全的Vue 2.0 学习路线,各个阶段适用

对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作d...

2002
来自专栏我就是马云飞

2018 年前端开发五大趋势

对于开发者而言,2017出奇的高效,不过2018年有望为IT领域带来更多发展。本文中,为了处理项目时紧跟潮流,我们会描述出每个前端编程人都需要关注的2018年J...

1054
来自专栏编程微刊

进阶攻略|前端最全的框架总结

前端的技术日渐更新,最近得空,花了一上午的时间,将前端常见的UI框架总结了一下,在开发的过程之中,有了这些,不断能够提高自己的工作效率,还可以在工作之余了解更多...

42910
来自专栏编程微刊

进阶攻略|前端最全的框架总结

2173
来自专栏phodal

关于前端你应该知道的几件事

文章来源于我对知乎的一个相关问题的回答。 JavaScript是最流行的编程语言,除此还有Java。 ? 如Tiobe所说: ? JavaScript...

1999
来自专栏Hongten

你用java的swing可以做出这么炫的mp3播放器吗?

这个mp3播放器是基于java的swing编写的,我认为界面还是可以拿出来和大家看一看评一评。

1982
来自专栏IT大咖说

苏宁易购:前后端分离架构的落地思考

2043
来自专栏程序员的知识天地

web前端,使用HTML5+CSS+JS框架有那些好处

相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架、CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么?是不是节约了开发项目时间...

2122
来自专栏极客慕白的成长之路

2018 前端趋势:更一致,更简单

1432
来自专栏腾讯移动品质中心TMQ的专栏

腾讯TMQ在线沙龙回顾|UI自动化——adbui的使用及实现

1675

扫码关注云+社区

领取腾讯云代金券