相關(guān)閱讀：微信支付如何實(shí)現(xiàn)內(nèi)置瀏覽器的H5頁(yè)面支付

情景再現(xiàn):

      正當(dāng)開(kāi)心地收拾東西準(zhǔn)備下班的時(shí)候，測(cè)試部的姑娘跑過(guò)來(lái)提了一個(gè)bug: “在iphone下，點(diǎn)擊下拉框出現(xiàn)頁(yè)面亂跳轉(zhuǎn)現(xiàn)象，安卓機(jī)并沒(méi)有這個(gè)問(wèn)題。而跳轉(zhuǎn)的頁(yè)面剛好是底部菜單的幾個(gè)頁(yè)面?！庇捎陧?xiàng)目比較急，小編只能乖乖留下解決問(wèn)題。再次測(cè)試之后，小編逐一排查了可能性原因(正式版和測(cè)試版代碼不一致，頁(yè)面HTML代碼錯(cuò)亂，css代碼錯(cuò)誤)，但都未能解決問(wèn)題。一個(gè)簡(jiǎn)單的select，怎么就出現(xiàn)問(wèn)題了呢?百思不得其解。（至今也沒(méi)有找到問(wèn)題根源）

      找不出問(wèn)題根源，只能先看看有沒(méi)有解決方案。經(jīng)過(guò)多次調(diào)試，捕獲select動(dòng)作，找到了一個(gè)解決方案。原理很簡(jiǎn)單：利用div來(lái)模擬select。

解決方案:

      思路也是比較清晰的。頁(yè)面中有兩個(gè)html結(jié)構(gòu)，一是select代碼照常寫(xiě)（一開(kāi)始處于隱藏狀態(tài)display:none），二是被模擬的div(一開(kāi)始處于顯示狀態(tài))，當(dāng)點(diǎn)擊div時(shí)出現(xiàn)select下拉框，同時(shí)將讀取的option值給被模擬的div，其模擬核心代碼可下載VisualSelect.js

html代碼

<div class=”visualSelect” >商行</div>
<select class=”round” style=”display:none;”>
 <option value=”1”>國(guó)股</option>
 <option value=”2”>商行</option>
 <option value=”3”>其他</option>
</select> 

css代碼

.round { border-radius: 4px;}
.visualSelect {
 width: 100%;
 padding: .45rem .5rem .25rem .75rem;
 margin-bottom: .875rem;
 border: 1px solid #ddd;
 border-radius: 4px;
 color: #bbb;
} 

js代碼

注：由于該問(wèn)題只存在于部分iphone，android手機(jī)并沒(méi)有問(wèn)題，因此最好判斷機(jī)型。

var agent = navigator.userAgent;
if ( agent.indexOf(“iPhone”) > -1) {
 $(“select”).VisualSelect(); //調(diào)用插件即可
}

PS：bootstrap滾動(dòng)監(jiān)聽(tīng)在iPhone微信內(nèi)置的瀏覽器上有時(shí)有效果有時(shí)沒(méi)有

bootstrap寫(xiě)了一個(gè)affix的附加導(dǎo)航(導(dǎo)航條在左邊，數(shù)據(jù)在右邊，分成的兩列)，在安卓手機(jī)的微信內(nèi)置瀏覽器上滾動(dòng)監(jiān)聽(tīng)是正常的，但是在iPhone微信的內(nèi)置瀏覽器上有時(shí)可以監(jiān)聽(tīng)有時(shí)不能監(jiān)聽(tīng)，這是什么原因？

解決方案：

出現(xiàn)這個(gè)原因是用HTML5寫(xiě)的網(wǎng)頁(yè)，iPhone沒(méi)有及時(shí)響應(yīng)導(dǎo)致的，最好用jQuery mobile。