前端頁面中微信iOS版長按識別二維碼有bug怎麼辦-解決方法
我相信很多在做微信開發的人都會遇到各種bug，而下面小編就給大家分享下前端頁面中微信iOS版長按識別二維碼bug的解決方法。
發現問題
頁面做出來後測試，發現在安卓版微信能正常識別，但iOS 版微信(iPhone 或 iPad)皆無法正常識別。出來問題一開頭固然是懷疑自己的程式碼有問題，上網搜尋相關資料，嘗試以下方案均無法解決：
1、定位方式由absolute 改為傳統的margin(據說絕對定位會導致這個問題);
2、修改viewport 上的maximum-scale大於1(網路上看到的解決方案);
3、網路上有說用position: fixed; 定位會導致這個問題，但這個頁面css 檔案完全無fixed 這個單詞。
尋找原因
後來找有經驗的`同事幫忙看下，發現可識別區域恰巧比正常地方稍微往上一點，而“比正常地方稍微往上一點”是多少呢?經過多次人工檢測，發現上文“比正常地方稍微往上一點”的高度正是微信標題欄+系統狀態列的高度(64px)。
做了一個問題重現的頁面，地址如下(用iOS 微信6.2 掃描方可重現)：
iOS 版微信6.2 中二維碼實際可識別區域為藍色框部分(請用第五個小指在邊緣區細心長按)。本人測試裝置為iPad mini2+ iOS8.1 +微信6.2.2.17，其他微信版本沒有測試;
基本上可以確定是iOS 版微信的本身問題，原因應該是微信客戶端在識別二維碼的時候忽略了微信標題欄+系統狀態列的高度，而這種bug 的促發貌似也是需要CSS 進行特殊定位的情況下才產生的(特別是absolute 絕對定位)。因為在微信實習的緣故，跟同事瞭解了下情況，這個bug 早在6.1 版本就出現了，他們有反饋過但到了6.2 都沒有修復。所以當前情況應該是先自行hack 下。
6月25日更新：經過與微信 iOS 開發人員的反饋溝通，確定是微信的 bug，據他們的說法目前已經修復，但能否在下一個版本中加入麼，就不得而知了。
解決方案
個人在做這個頁面時候採取的解決方案是透過將img 標籤增大padding 的方式來增大可點選區域(為此padding-bottom 特長)來解決的。
6月25日更新：還有一種解決方法(如下圖)，即為二維碼圖片本身增加透明底部背景(前端上訪客看不到)，增加可接觸面積。
[前端頁面中微信iOS版長按識別二維碼有bug怎麼辦_解決方法]相關文章：
1.教師履行職業道德規範對照檢查問題清單
2.自己過生日的祝福語大全
【前端頁面中微信iOS版長按識別二維碼有bug怎麼辦-解決方法】相關文章：