视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办_jquery
2020-11-27 21:48:17 责编:小采
文档


相关阅读:微信支付如何实现内置浏览器的H5页面支付

情景再现:

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

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

解决方案:

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

html代码



css代码



js代码

注:由于该问题只存在于部分iphone,android手机并没有问题,因此最好判断机型。



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

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

解决方案:

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

下载本文
显示全文
专题