h5微信手机端debug模式(iOS微信H5页面橡皮回弹效果的踩坑记录)
h5微信手机端debug模式
iOS微信H5页面橡皮回弹效果的踩坑记录业务需求
近期开发的项目有一部分是与微信公众号相关的H5页面,在Android端微信上页面效果展示无异常,但是在 iOS端 微信多多少少会出现一些意想不到的bug。此次主要针对移动端H5页面在iOS端产生的 橡皮回弹(橡皮筋效果)问题做一下相关记录,希望对遇到类似问题的同学有所帮助。
🐕方案一:使用 inobounce.js
inobounce.js github地址
在 html主页面 的 header 标签中引入 inbounce.js,即 。当引入此文件之后,iOS端整个页面都无法滑动或滚动,若想滚动的元素能够实现滚动效果,则需要对滚动区域设置固定的高度,即 height、max-height,同时也要设置 overflow: auto,实现页面滑动。为防止iOS端页面滚动发生卡顿现象,需要对滚动区域设置 -webkit-overflow-scrolling: touch 属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>inobounce</title> <script src="inobounce.js"></script> <style> ul { height: 115px; border: 1px solid gray; overflow: auto; -webkit-overflow-scrolling: touch; } </style> </head> <body> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> <li>List Item 5</li> <li>List Item 6</li> <li>List Item 7</li> <li>List Item 8</li> <li>List Item 9</li> <li>List Item 10</li> </ul> </body> </html>
🐒 方案二:CSS样式处理(推荐)
偶然间在iOS端打开一些公众号的H5活动页,没有产生所谓的橡皮回弹效果,于是就想着是否可以采用此效果来解决iOS端网页产生的橡皮回弹效果。最终尝试此方法可以实现iOS端页面固定,不产生橡皮回弹效果。在系统版本iOS13+上的设备上已解决橡皮筋效果,系统版本iOS12+的设备上没有尝试,后续准备找iOS12+的苹果手机进行进一步的测试,其次再将测试结果进行补充。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>iOS橡皮回弹</title> </head> <body> <!-- 内容区 --> <li id="app"></li> </body> </html>
主要CSS代码:
/* 初始化 */ * { margin: 0; padding: 0; } /* 基本样式 */ html, body { width: 100%; height: 100%; overflow: hidden; } body { box-sizing: border-box; position: relative; } /* 超出滚动 */ #app { width: 100%; height: 100%; overflow-y: auto; }
🐬总结:
总的来说,两种方案我在实际开发中都进行了尝试。方案一在微信中浏览H5网页时可以完美解决橡皮回弹效果;当H5页面在iOS端微信授权跳转时,底部会有一个导航条,此时导航条也有可能被遮盖,点击导航条两端的按钮没有反应。在Safari浏览器打开H5页面时,网页的顶端地址栏和底部菜单栏会有一定的遮挡,体验效果不是很理想,最终此方案被pass掉了。方案二是我实际工作中使用的,回弹效果得到了一定的改善。体验效果较方案一有了很大的提升。
如果页面有微信授权,以及页面路径的跳转,此时iOS端微信打开的网页底部会多出一个导航条,同样Android端微信不会出现类似导航条。若没有微信授权以及页面跳转,则两方案均可选;若有微信授权,推荐使用方案二。
到此这篇关于iOS微信H5页面橡皮回弹效果的文章就介绍到这了,更多相关iOS微信H5页面橡皮回弹内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- SQL Server Management Studio(SSMS)复制数据库的方法(SQL Server Management StudioSSMS复制数据库的方法)
- axios封装怎么实现(axios的简单封装以及使用实例代码)
- vue怎么引入axios(如何用vue封装axios请求)
- h5微信手机端debug模式(iOS微信H5页面橡皮回弹效果的踩坑记录)
- canvas如何调试(关于canvas.toDataURL 在iOS运行失败的问题解决)
- h5移动端开发app(移动端H5唤起APP的写法实例IOS、android)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- ios键盘字符预览怎么关闭(详解通过focusout事件解决IOS键盘收起时界面不归位的问题)
- axios 请求前校验参数(js实现axios限制请求队列)
- ios如何播放html5(Html5移动端适配IphoneX等机型的方法)
- axios并发请求数据(项目中如何使用axios过滤多次重复请求详解)
- axios原理和实现(GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析)
- 使用 iosOverlay 弹出提示信息
- h5实现唤起本地app(h5页面唤起app如果没安装就跳转下载iOS和Android)
- css不显示滚动条设置(css隐藏移动端滚动条并且ios上平滑滚动的方法)
- reactnative ios(详解React Native与IOS端之间的交互)
- 哪里可以看熊猫(成都哪里可以看熊猫)
- oppo手机的三种录屏方法,你知道有哪些吗(oppo手机的三种录屏方法)
- 吉林神秘传染链跨省 传染源尚未找到,舒兰 封城(吉林神秘传染链跨省)
- 吉林舒兰 封城 聚集性疫情传播链已延至沈阳,有一个细节让人忧心(吉林舒兰封城)
- 1天密接者猛增77人,患者轨迹透露危险信号 吉林市全面封闭管理(1天密接者猛增77人)
- 吉林舒兰 封城 15人确诊 276人隔离,出现跨省传播(吉林舒兰封城)
热门推荐
- python创建字典的代码(Python创建字典的八种方式)
- php对象模型(PHP数据对象映射模式实例分析)
- css渐变有几种(CSS 还能这样玩?奇思妙想渐变的艺术)
- python实用的游戏小代码(python3实现小球转动抽奖小游戏)
- 虚拟服务器和云主机的区别(云服务器属于虚拟机么?它们有什么不同?)
- 宝塔小程序制作(宝塔面板微信小程序使用图文教程)
- dedecms标签工具(开启DedeCMS软件源码及分类信息采集功能的方法)
- .NET中First,FirstOrDefault,Single,SingleOrDefault的区别
- SQL Server作业活动监视器
- 云服务器和物理服务器哪个更好(浅谈云服务器和独立服务器的八大差异)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9