- 相關(guān)推薦
前端頁(yè)面中微信iOS版長(zhǎng)按識(shí)別二維碼有bug怎么辦-解決方法
我相信很多在做微信開(kāi)發(fā)的人都會(huì)遇到各種bug，而下面小編就給大家分享下前端頁(yè)面中微信iOS版長(zhǎng)按識(shí)別二維碼bug的解決方法。
發(fā)現(xiàn)問(wèn)題
頁(yè)面做出來(lái)后測(cè)試，發(fā)現(xiàn)在安卓版微信能正常識(shí)別，但iOS 版微信(iPhone 或 iPad)皆無(wú)法正常識(shí)別。出來(lái)問(wèn)題一開(kāi)頭固然是懷疑自己的代碼有問(wèn)題，上網(wǎng)搜索相關(guān)資料，嘗試以下方案均無(wú)法解決：
1、定位方式由absolute 改為傳統(tǒng)的margin(據(jù)說(shuō)絕對(duì)定位會(huì)導(dǎo)致這個(gè)問(wèn)題);
2、修改viewport 上的maximum-scale大于1(網(wǎng)絡(luò)上看到的解決方案);
3、網(wǎng)絡(luò)上有說(shuō)用position: fixed; 定位會(huì)導(dǎo)致這個(gè)問(wèn)題，但這個(gè)頁(yè)面css 文件完全無(wú)fixed 這個(gè)單詞。
尋找原因
后來(lái)找有經(jīng)驗(yàn)的同事幫忙看下，發(fā)現(xiàn)可識(shí)別區(qū)域恰巧比正常地方稍微往上一點(diǎn)，而“比正常地方稍微往上一點(diǎn)”是多少呢?經(jīng)過(guò)多次人工檢測(cè)，發(fā)現(xiàn)上文“比正常地方稍微往上一點(diǎn)”的高度正是微信標(biāo)題欄+系統(tǒng)狀態(tài)欄的高度(64px)。
做了一個(gè)問(wèn)題重現(xiàn)的頁(yè)面，地址如下(用iOS 微信6.2 掃描方可重現(xiàn))：
iOS 版微信6.2 中二維碼實(shí)際可識(shí)別區(qū)域?yàn)樗{(lán)色框部分(請(qǐng)用第五個(gè)小指在邊緣區(qū)細(xì)心長(zhǎng)按)。本人測(cè)試設(shè)備為iPad mini2+ iOS8.1 +微信6.2.2.17，其他微信版本沒(méi)有測(cè)試;
基本上可以確定是iOS 版微信的本身問(wèn)題，原因應(yīng)該是微信客戶(hù)端在識(shí)別二維碼的時(shí)候忽略了微信標(biāo)題欄+系統(tǒng)狀態(tài)欄的高度，而這種bug 的促發(fā)貌似也是需要CSS 進(jìn)行特殊定位的情況下才產(chǎn)生的(特別是absolute 絕對(duì)定位)。因?yàn)樵谖⑿艑?shí)習(xí)的緣故，跟同事了解了下情況，這個(gè)bug 早在6.1 版本就出現(xiàn)了，他們有反饋過(guò)但到了6.2 都沒(méi)有修復(fù)。所以當(dāng)前情況應(yīng)該是先自行hack 下。
6月25日更新：經(jīng)過(guò)與微信 iOS 開(kāi)發(fā)人員的反饋溝通，確定是微信的 bug，據(jù)他們的說(shuō)法目前已經(jīng)修復(fù)，但能否在下一個(gè)版本中加入么，就不得而知了。
解決方案
個(gè)人在做這個(gè)頁(yè)面時(shí)候采取的解決方案是通過(guò)將img 標(biāo)簽增大padding 的方式來(lái)增大可點(diǎn)擊區(qū)域(為此padding-bottom 特長(zhǎng))來(lái)解決的。
6月25日更新：還有一種解決方法(如下圖)，即為二維碼圖片本身增加透明底部背景(前端上訪(fǎng)客看不到)，增加可接觸面積。
[前端頁(yè)面中微信iOS版長(zhǎng)按識(shí)別二維碼有bug怎么辦_解決方法]相關(guān)文章：
1.教師履行職業(yè)道德規(guī)范對(duì)照檢查問(wèn)題清單
【前端頁(yè)面中微信iOS版長(zhǎng)按識(shí)別二維碼有bug怎么辦-解決方法】相關(guān)文章：
這是微信的安全bug么？07-13
微信mac版和微信網(wǎng)頁(yè)版有什么不同？07-11
微信二維碼防偽07-13
網(wǎng)頁(yè)設(shè)計(jì)中頁(yè)面尺寸標(biāo)準(zhǔn)07-03
微信掃描二維碼出現(xiàn)亂碼？07-13
微信5.0說(shuō)朋友圈長(zhǎng)按相機(jī)鍵是內(nèi)部體驗(yàn)功能07-10
微信為何發(fā)純文字信息得長(zhǎng)按右上角的「照相07-09