使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone），该怎么办
相关阅读：微信支付如何实现内置浏览器的H5页面支付
情景再现:
正当开心地收拾东西准备下班的时候，测试部的姑娘跑过来提了一个bug: “在iphone下，点击下拉框出现页面乱跳转现象，安卓机并没有这个问题。而跳转的页面刚好是底部菜单的几个页面。”由于项目比较急，小编只能乖乖留下解决问题。再次测试之后，小编逐一排查了可能性原因(正式版和测试版代码不一致，页面HTML代码错乱，css代码错误)，但都未能解决问题。一个简单的select，怎么就出现问题了呢?百思不得其解。（至今也没有找到问题根源）
找不出问题根源，只能先看看有没有解决方案。经过多次调试，捕获select动作，找到了一个解决方案。原理很简单：利用div来模拟select。
解决方案:
思路也是比较清晰的。页面中有两个html结构，一是select代码照常写（一开始处于隐藏状态display:none），二是被模拟的div(一开始处于显示状态)，当点击div时出现select下拉框，同时将读取的option值给被模拟的div，其模拟核心代码可下载VisualSelect.js
html代码
<div class=”visualSelect” >商行</div> <select class=”round” style=”display:none;”> <option value=”1”>国股</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代码
注：由于该问题只存在于部分iphone，android手机并没有问题，因此最好判断机型。
var agent = navigator.userAgent;
if ( agent.indexOf(“iPhone”) > -1) {
$(“select”).VisualSelect(); //调用插件即可
}
PS：bootstrap滚动监听在iPhone微信内置的浏览器上有时有效果有时没有
bootstrap写了一个affix的附加导航(导航条在左边，数据在右边，分成的两列)，在安卓手机的微信内置浏览器上滚动监听是正常的，但是在iPhone微信的内置浏览器上有时可以监听有时不能监听，这是什么原因？
解决方案：
出现这个原因是用HTML5写的网页，iPhone没有及时响应导致的，最好用jQuery mobile。
相关文章
最近项目中遇见 Jquery Ajax 缓存问题,load出来的页面状态有时正常，有时不对，记录一下，希望对大家有帮助2011-05-05
jquery.hotkeys监听键盘按下事件keydown插件
jquery.hotkeys就是网页是监听用户按键要用到的jquery库，这里简单介绍下使用方法,需要的朋友可以参考下2014-05-05![浅谈jQuery中的eq()与DOM中element.[]的区别](//img.jbzj.com/images/xgimg/bcimg2.png)
浅谈jQuery中的eq()与DOM中element.[]的区别
下面小编就为大家带来一篇浅谈jQuery中的eq()与DOM中element.[]的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
重写了昨天的图片轮换，加入了自动切换效果，改变了布局，增强了可定制性，当然，还是有点小小的问题，在IE 6+,chrome,firfox3.68下测试正常运行2010-07-07
最近，有需要做一个动态的给table，添加行，用了点时间，算是做成了。已测试过，但如果发现有什么bug，可以留言，欢迎拍砖。大家一起进步。2011-03-03
使用ajax在前端验证是否执行某个操作，下面为大家介绍下jquery.post的具体使用2014-01-01
这篇文章主要介绍了jQuery实现图片加载完成后改变图片大小的方法,结合实例形式分析了jQuery图片样式与页面元素属性动态操作的相关技巧,需要的朋友可以参考下2016-03-03
jquery实现获取具体时间(年月日)后3个月+1天的年月日
这篇文章主要为大家详细介绍了jquery如何实现获取具体时间(年月日)后3个月+1天的年月日,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2023-11-11
这篇文章主要为大家详细介绍了jQuery实现简单五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
jQuery得到多个值只能用取Class ,不能用取ID的方法
下面小编就为大家带来一篇jQuery得到多个值只能用取Class ,不能用取ID的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
![浅谈jQuery中的eq()与DOM中element.[]的区别](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论