使用微信内置浏览器点击下拉框出现页面乱跳转现象iphone,该怎么办

相关阅读:页面支付

情景再现:

正当开心地收拾东西准备下班的时候,测试部的姑娘跑过来提了一个bug: “在iphone下,点击下拉框出现页面跳转现象,安卓机并没有这个问题。而跳转页面刚好是底部菜单的几个页面。”由于项目比较急,小编只能乖乖留下解决问题。再次测试之后,小编逐一排查了可能性原因(正式版和测试版代码不一致,页面HTML代码错乱,css代码错误),但都未能解决问题。一个简单的select,怎么就出现问题了呢?百思不得其解。(至今也没有找到问题根源)

找不出问题根源,只能先看看有没有解决方案。经过多次调试,捕获select动作,找到了一个解决方案。原理很简单:利用div来模拟select。

解决方案:

思路也是比较清晰的。页面中有两个html结构,一是select代码照常写(一开始处于隐藏状态display:none),二是被模拟的div(一开始处于显示状态),当点击div时出现select下拉框,同时将读取的option值给被模拟的div,其模拟核心代码可下载VisualSelect.js

HTML代码

rush:js;">
商行

css代码

rush:js;"> .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手机并没有问题,因此最好判断机型。

-1) { $(“select”).VisualSelect(); //调用插件即可 }

PS:bootstrap滚动监听在iPhone微信内置的浏览器上有时有效果有时没有

bootstrap写了一个affix的附加导航(导航条在左边,数据在右边,分成的两列),在安卓手机的微信内置浏览器上滚动监听是正常的,但是在iPhone微信的内置浏览器上有时可以监听有时不能监听,这是什么原因?

解决方案:

出现这个原因是用HTML5写的网页,iPhone没有及时响应导致的,最好用jQuery mobile。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...