品才網(wǎng)>職場充電>前端頁面中微信iOS版長按識別二維碼有bug怎么辦-解決方法

前端頁面中微信iOS版長按識別二維碼有bug怎么辦-解決方法

時間：2022-06-26 12:14:06 職場充電我要投稿

相關(guān)推薦

　　我相信很多在做微信開發(fā)的人都會遇到各種bug，而下面小編就給大家分享下前端頁面中微信iOS版長按識別二維碼bug的解決方法。

　　發(fā)現(xiàn)問題

　　頁面做出來后測試，發(fā)現(xiàn)在安卓版微信能正常識別，但iOS 版微信(iPhone 或 iPad)皆無法正常識別。出來問題一開頭固然是懷疑自己的代碼有問題，上網(wǎng)搜索相關(guān)資料，嘗試以下方案均無法解決：

　　1、定位方式由absolute 改為傳統(tǒng)的margin(據(jù)說絕對定位會導(dǎo)致這個問題);

　　2、修改viewport 上的maximum-scale大于1(網(wǎng)絡(luò)上看到的解決方案);

　　3、網(wǎng)絡(luò)上有說用position: fixed; 定位會導(dǎo)致這個問題，但這個頁面css 文件完全無fixed 這個單詞。

　　尋找原因

　　后來找有經(jīng)驗的同事幫忙看下，發(fā)現(xiàn)可識別區(qū)域恰巧比正常地方稍微往上一點，而“比正常地方稍微往上一點”是多少呢?經(jīng)過多次人工檢測，發(fā)現(xiàn)上文“比正常地方稍微往上一點”的高度正是微信標(biāo)題欄+系統(tǒng)狀態(tài)欄的高度(64px)。

　　做了一個問題重現(xiàn)的頁面，地址如下(用iOS 微信6.2 掃描方可重現(xiàn))：

　　iOS 版微信6.2 中二維碼實際可識別區(qū)域為藍(lán)色框部分(請用第五個小指在邊緣區(qū)細(xì)心長按)。本人測試設(shè)備為iPad mini2+ iOS8.1 +微信6.2.2.17，其他微信版本沒有測試;

　　基本上可以確定是iOS 版微信的本身問題，原因應(yīng)該是微信客戶端在識別二維碼的時候忽略了微信標(biāo)題欄+系統(tǒng)狀態(tài)欄的高度，而這種bug 的促發(fā)貌似也是需要CSS 進(jìn)行特殊定位的情況下才產(chǎn)生的(特別是absolute 絕對定位)。因為在微信實習(xí)的緣故，跟同事了解了下情況，這個bug 早在6.1 版本就出現(xiàn)了，他們有反饋過但到了6.2 都沒有修復(fù)。所以當(dāng)前情況應(yīng)該是先自行hack 下。

　　6月25日更新：經(jīng)過與微信 iOS 開發(fā)人員的反饋溝通，確定是微信的 bug，據(jù)他們的說法目前已經(jīng)修復(fù)，但能否在下一個版本中加入么，就不得而知了。

　　解決方案

　　個人在做這個頁面時候采取的解決方案是通過將img 標(biāo)簽增大padding 的方式來增大可點擊區(qū)域(為此padding-bottom 特長)來解決的。

　　6月25日更新：還有一種解決方法(如下圖)，即為二維碼圖片本身增加透明底部背景(前端上訪客看不到)，增加可接觸面積。

[前端頁面中微信iOS版長按識別二維碼有bug怎么辦_解決方法]相關(guān)文章：

1.教師履行職業(yè)道德規(guī)范對照檢查問題清單

2.自己過生日的祝福語大全

【前端頁面中微信iOS版長按識別二維碼有bug怎么辦-解決方法】相關(guān)文章：

這是微信的安全bug么？07-13

微信mac版和微信網(wǎng)頁版有什么不同？07-11

微信二維碼防偽07-13

網(wǎng)頁設(shè)計中頁面尺寸標(biāo)準(zhǔn)07-03