使用viewport缩放实现自适应页面中,微信长按识别二维码的一个大坑

起因是有这么一个需求,如果是在订阅号中,微信支付失败后要弹一个弹窗,中间展示一个URL生成的二维码,用户长按二维码后可以进行支付。

最初按照常规方式将弹窗展示出来后,在iOS上长按二维码怎么都识别不了,倒是Android没有什么问题。于是Google了一下“微信长按识别二维码”(请原谅我用的关键字),找到这么篇文章:

微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案

文章讲到了微信6.1二维码识别区域上移的问题,遂试了一下,无意中发现识别区域居然在右下角,甚是奇怪。而且文内提到据微信称6.2已经修复此BUG了,而我用的是6.3.7。

终于在无数次尝试后,发现问题的真实原因是微信对viewport缩放页面的适配不佳,原理如下图。

由于页面是整体缩放的,但是微信仍然按照未缩放前的页面来识别二维码,导致实际的识别区域变成了右下角阴影的部分。

最后的解决方案:

由于项目已经接近尾声了,修改自适应方案的话牵涉太多,最后无奈只得增大了二维码的大小,使得阴影的区域与实际显示的二维码尽量重合,不过也破坏了UI,也算是不得已而为之吧。

希望微信能尽快修复这个问题,经测试Android并无此问题。