微信长按识别二维码实际开发中遇到的坑

最近在折腾一个手机端页面长按识别二维码的问题。发现长按二维码时在ios和android手机上识别不是那么灵敏。下面整理下我对该问题的总结。
起初我将二维码图片直接放在background中，这种情况识别效果特别差。然后我将二维码图片单独切出来放在了img标签中，问题稍微缓解了下，但是识别还是很不稳定。

网页中二维码识别的原理
微信中二维码识别采用的逻辑是截屏识别，当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏，而不是之前有人提到的img标签中的图片。下面这篇文章详细说明了微信识别二维码的原理，并给出了非常具体的建议，这篇文章的作者是微信团队成员，一定要看哦！

常见bug整理

1. IOS版微信长按识别二维码无法正常识别

对于二维码区域，实际可识别区域是整体上移64px，64px的偏移与二维码大小本身无关。下面的红色的区域即为实际可识别的二维码区域。为什么是神秘的64px？因为64px正好是微信内置浏览器标题栏＋系统标题栏的高度。可以认为微信客户端在识别二维码的时候忽略了微信标题栏＋系统状态栏的高度。

解决方案有两个：

• 通过为img增加padding增大可接触面积。
• 为二维码本身增加透明底部背景，如下:

2 多张二维码图片无法在同一屏幕中共享

微信识别二维码的原理是当长按的时候会将屏幕截屏，识别保存下来的图片。建议解决办法是不要在同一屏幕中放多张图片。

3 多次执行长按二维码的功能会导致内存泄漏，手机会变卡。

4 网上看到的其它说法，可以在调试的时候都按照这种方式来尝试一下

不要用fixed定位
初始缩放值为1，最大缩放值大于或等于1，不支持缩放。不可以识别

<meta content="width=device-width, initial-scale=1.1, maximum-scale=1.2, user-scalable=0" name="viewport" />

• 初始缩放设置为小于1或者大于1，最大缩放值大于或者等于初始缩放,不支持缩放。不可以识别

<meta content="width=device-width, initial-scale=1.1, maximum-scale=1.2, user-scalable=0" name="viewport" />

• 初始缩放值为1，最大缩放值大于或等于1，不支持缩放。不可以识别

<meta content="width=device-width, initial-scale=1, maximum-scale=1.2, user-scalable=0" name="viewport" />

• 都不设置 不可以识别

最后为了兼容，只能设置：初始缩放为1，最大缩放值要大于1，不支持缩放。如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>