【微信h5大坑】IOS长按二维码没反应解决办法

作者: Cesc90 | 来源:发表于2016-09-12 20:41 被阅读0次

【微信h5大坑】IOS长按二维码没反应解决办法
LayaAir微信端长按识别二维码
【H5展示】宁吉喆局长在赣调研纪行
微信H5页面IOS长按不能识别二维码
微信H5实现网页长按保存图片及识别二维码
iOS-微信H5长按图片无法识别二维码
iOS WKWebView H5微信支付跳转
iOS-仿微信扫一扫、长按识别二维码，以及一句话生成二维码
菜鸟填坑记-微信浏览器屏蔽下拉长按识别
ios 微信长按识别二维码

上一张图，表达此时内心的心情

微信，忘却难免留个疤

正文开始：

客户需求：
点击关注按钮展示弹层，弹层展示二维码，长按二维码关注。

问题情况：
把功能做上去以后做测试的时候发现安卓下可以正常识别，但是IOS却毫无反应。百度了一万年没有找到解决方案。其实是有解决方案的，只是网上的解决办法说得太死。

终于发现问题：
百度搜索结果中有一种说法，大概意思是：长按识别二维码的时候，微信对二维码的识别位置有偏差，于是对着整个页面弹层的位置（需求是做到弹层上的）挨个长按，最终发现识别区域位于二维码图片右下方，大概半个图片大小的位置（不精确）。

解决办法：

1.  给二维码图片的父层div加一个背景图，此图就是二维码图片；
2.  把二维码img相对定位（position:relative;），往左上角移动，left跟top值需要慢慢调，确保父层div背景图的四个角都能识别二维码；
3.  二维码img设置opacity:0;隐藏；
ps: 这里可能需要做iphone plus的媒体查询兼容：@media (-webkit-device-pixel-ratio:3)；