Recently in a mobile phone page long press to identify the two-dimensional code problem. It turns out that holding down the QR code isn’t as sensitive on ios and Android phones. Here’s my summary of the problem. At first, I placed the TWO-DIMENSIONAL code image directly in the background, which had a particularly poor recognition effect. Then I cut out the QR code picture separately and put it in the IMG tag. The problem was slightly relieved, but the recognition was still very unstable.

The principle of TWO-DIMENSIONAL code recognition in web pages The logic used for two-dimensional code recognition in wechat is screen capture recognition. When the client finds that the user makes a long press operation in the IMG tag of the web page, it will immediately take a screen capture and start the two-dimensional code recognition algorithm. So the images used for QR code recognition are screenshots, not images from the IMG tag mentioned earlier. The following article details the principle of wechat qr code recognition, and gives very specific suggestions, the author of this article is a member of wechat team, must see oh!

Common bug sorting

  1. IOS version oF wechat long press to identify the TWO-DIMENSIONAL code can not be identified

For the two-dimensional code area, the actual identifiable area is shifted 64px as a whole, and the 64PX offset has nothing to do with the size of the two-dimensional code itself. The red area below is the actual qr code area that can be recognized. Why the mysterious 64px? Because 64px is exactly the height of wechat’s built-in browser title bar + system title bar. It can be considered that the wechat client ignores the height of wechat title bar + system status bar when identifying the TWO-DIMENSIONAL code.

There are two solutions:

  • Increase the touchable area by adding padding to img.
  • Add a transparent bottom background for the TWO-DIMENSIONAL code itself, as follows:

2 Multiple TWO-DIMENSIONAL code images cannot be shared on the same screen

Wechat qr code recognition principle is when long press when the screen will be screenshot, identify the saved picture. The suggested solution is not to put multiple images on the same screen.

The function of pressing the QR code for many times will lead to memory leakage and the phone will change card.

4 online to see other statements, you can debug in accordance with this way to try

Do not use fixed when the initial scaling value is 1 and the maximum scaling value is greater than or equal to 1. Scaling is not supported. unrecognizable

<meta Content ="width=device-width, initial-scale=1.1, maximum-scale=1.2, user-scalable=0" name="viewport" />Copy the code
  • The initial scaling is set to less than or greater than 1, and the maximum scaling is greater than or equal to the initial scaling. Scaling is not supported. unrecognizable
<meta Content ="width=device-width, initial-scale=1.1, maximum-scale=1.2, user-scalable=0" name="viewport" />Copy the code
  • The initial scaling value is 1, and the maximum scaling value is greater than or equal to 1. Scaling is not supported. unrecognizable
<meta Content ="width=device-width, initial-scale=1, maximum-scale=1.2, user-scalable=0" name="viewport" />Copy the code
  • None can be identified without setting

Finally, for compatibility, you can only set the initial scale to 1, the maximum scale value to be greater than 1, and no scaling is supported. As follows:

< meta name = "viewport" content = "width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" / >Copy the code