網頁中二維碼識別規則

當客戶端發現使用者在網頁的img標籤內進行長按操作時，會立刻截圖並且啟動二維碼識別演算法。所以這裡用於二維碼識別的圖片是截圖，而不是之前有人提到的img標籤中的圖片。

為什麼要用截圖，這也是一個開發時候的思考。客戶端截圖時候，可以不用考慮網路傳輸等因素，最快的得到識別結果，否則就需要走一次圖片下載的邏輯，使用者長按後等待的時間會加長，體驗上也失去了快感。當然，這也帶來了識別不出的問題（所以正在考慮先截圖，截圖識別失敗再下載的新邏輯）。

基於截圖識別，網頁中二維碼無法被識別的原因有這幾個：

1、二維碼顯示資訊不全，在長按時候只有部分可見
2、二維碼周圍資訊過於複雜，在整個截圖中二維碼演算法無法正確識別。

3、網頁沒有載入完成，微信的識別js沒有啟動。

如果是普通使用者遇到這樣的問題，大不了就不玩了。但是對於運營者，每個長按的使用者都是潛力使用者，在距離接上頭一步之遙的地方停住了，肯定內心萬馬漂過，有以下建議可以試試。

1、二維碼周圍不要過於複雜，留白為佳。
2、二維碼不要太大，否則容易跳出螢幕。通常160*160就可以。

測試這個問題的方式，在遇到網頁中二維碼無法識別的時候，截圖，然後通過微信掃一掃匯入這個截圖，看看是否也一樣出問題。

當然，這個識別網頁二維碼，玩法多樣，相當於開啟了一個新的外跳方式，怎麼玩，就不在這裡展開了。

攝圖網https://www.wode007.com/sites/73204.html

二維碼識別常見問題

1，在iOS 微信6.2.2識別的二維碼的區域向上偏移了64px

這64px是微信內建瀏覽器標題欄+系統標題欄

二維碼大到一定程度就沒有“識別上移”的詭異現象了，大概是二維碼大小在400px 以上的時候就沒有。

解決：

1.通過img增加padding 增大可接觸面積；這個需要微調
2.為二維碼圖片本身增加透明底部背景，實際上就是把主要的二維碼放在上面，下面給一塊的透明的背景。這樣他識別圖片64px的時候正好是完整的圖片。

2，兩（多）張二維碼無法在同一螢幕視窗中共存

如果螢幕上有兩個二維碼只能識別其中一個。實際上微信是把你的整個螢幕先截圖。再識別截圖後的圖片。所以你的螢幕上的內容都會變成一個圖片，即使不是一屏顯示也不行。

解決：

1、不把這些需要識別的二維碼圖片放在一個螢幕裡。
2、二維碼設定為可以點選大圖瀏覽，然後在大圖瀏覽時，長按識別二維碼

注：文章內容來源與網路參考，有不正確的地方會在以後的認識中逐步修正。

3，多次執行長按二維碼的功能會導致記憶體洩漏，手機會變卡

4，網上看到的其它說法，可以在除錯的時候都按照這種方式來嘗試一下

不要用fixed定位

初始縮放值為1，最大縮放值大於或等於1，不支援縮放。不可以識別

<meta content="width=device-width, initial-scale=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" />

都不設定 不可以識別