相关阅读：微信支付如何实现内置浏览器的H5页面支付
情景再现:
正当开心地收拾东西准备下班的时候，测试部的姑娘跑过来提了一个bug:
“在iphone下，点击下拉框出现页面乱跳转现象，安卓机并没有这个问题。而跳转的页面刚好是底部菜单的几个页面。”由于项目比较急，小编只能乖乖留下解决问题。再次测试之后，小编逐一排查了可能性原因(正式版和测试版代码不一致，页面HTML代码错乱，css代码错误)，但都未能解决问题。一个简单的select，怎么就出现问题了呢?百思不得其解。（至今也没有找到问题根源）
找不出问题根源，只能先看看有没有解决方案。经过多次调试，捕获select动作，找到了一个解决方案。原理很简单：利用div来模拟select。
解决方案:
思路也是比较清晰的。页面中有两个html结构，一是select代码照常写（一开始处于隐藏状态display:none），二是被模拟的div(一开始处于显示状态)，当点击div时出现select下拉框，同时将读取的option值给被模拟的div，其模拟核心代码可下载VisualSelect.js
html代码
<div
class=”visualSelect”
>商行
<select
class=”round”
style=”display:none;”>
<option
value=”1”>国股
<option
value=”2”>商行
<option
value=”3”>其他
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代码
注：由于该问题只存在于部分iphone，android手机并没有问题，因此最好判断机型。
var
agent
=
navigator.userAgent;
if
(
agent.indexOf(“iPhone”)
>
-1)
{
$(“select”).VisualSelect();
//调用插件即可
}
PS：bootstrap滚动监听在iPhone微信内置的浏览器上有时有效果有时没有
bootstrap写了一个affix的附加导航(导航条在左边，数据在右边，分成的两列)，在安卓手机的微信内置浏览器上滚动监听是正常的，但是在iPhone微信的内置浏览器上有时可以监听有时不能监听，这是什么原因？
解决方案：
出现这个原因是用HTML5写的网页，iPhone没有及时响应导致的，最好用jQuery
mobile。