av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

您的位置:首頁技術文章
文章詳情頁

iOS微信H5頁面橡皮回彈效果的踩坑記錄

瀏覽:120日期:2022-06-03 09:11:11
業務需求

近期開發的項目有一部分是與微信公眾號相關的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='http://m.4tl426be.cn/bcjs/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><!-- 內容區 --><div id='app'></div></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頁面橡皮回彈內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: 微信
相關文章:
主站蜘蛛池模板: 在线视频一区二区三区 | 美女露尿口视频 | 免费在线毛片 | 中文字幕亚洲一区二区三区 | 久久久成人网 | 国产精品视频在线免费观看 | 蜜桃在线一区二区三区 | 国产在线精品一区二区三区 | 婷婷狠狠| 午夜国产羞羞视频免费网站 | 一区二区福利视频 | 亚洲第一成年免费网站 | 一区二区精品视频 | 台湾佬成人网 | 亚洲欧洲日韩 | 伊人一区| 国产一区二区精品在线 | 亚洲视频在线一区 | 精品一区二区在线观看 | 欧美日韩亚洲国产 | 国产做爰 | 国产一区影院 | 日日夜夜av | 国产精品永久久久久久久www | 婷婷精品 | 亚洲精品电影网在线观看 | 激情一区二区三区 | 欧美一级免费看 | 超碰国产在线 | 亚洲精品乱码久久久久久蜜桃91 | 成人国产精品色哟哟 | 在线色网址 | 精品美女久久久久久免费 | 黄色国产 | 日韩免费在线观看视频 | 婷婷成人在线 | 精品成人免费一区二区在线播放 | 欧美日本一区 | 国产在线一区二区 | 亚洲成av人片在线观看无码 | 日韩精品在线视频 |