前端页面中 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日更新:还有一种解决方法(如下图),即为二维码图片本身增加透明底部背景(前端上访客看不到),增加可接触面积。
- 那些年Struts 1.X 而今我还是不会
- 关于MySQL DNS解析探究之一:DNS解析确实在起作用
- 每一个程序员需要了解的10个Linux命令
- 实战案例 | 使用机器学习和大数据预测心脏病
- 关于JVM直接内存触发Full GC
- 极客DIY:通过树莓派发送摩斯码
- Hadoop SequnceFile.Writer 压缩模式及压缩库浅析
- Thrift抛直接内存OOM一点解决思路
- 小顶堆Java实现
- Tomcat源码分析一:源码导入
- 如何使用Metasploit对安卓手机进行控制
- 关于MySQL DNS解析探究之二:unauthenticated user
- Thrift Direct Memory OOM问题解决方法
- Mapreduce程序中reduce的Iterable参数迭代出是同一个对象
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- C语言字符串指针
- Http:GET和POST请求的区别
- 十六进制数组转换成ASCII码
- 解决ModuleNotFoundError: No module named ‘pip’问题
- 【FreeRTos】队列管理1
- 【FreeRTOS】队列管理2
- ubuntu——Zbar 在linux/ubuntu下的安装编译
- ZBAR库
- 英文文本关系抽取(fine-tune Huggingface XLNet)
- Laravel 7.x 使用 keyspace notification 监听不到 Key 过期事件
- 嵌入式链接脚本(LINK SCRIPT)介绍
- zbar中的zbar_scan_image 函数
- PM2源码分析
- zbar库中的zbar_scan_y函数
- 快速学习-Nacos Config--服务配置