解決IOS端微信H5頁面軟鍵盤彈起后頁面下方留白的問題
前言:微信H5項(xiàng)目,ios端出現(xiàn)了軟鍵盤輸完隱藏后頁面不會(huì)回彈,下方會(huì)有一大塊留白
最近微信和ios都有版本升級,不知道是哪邊升級造成的,但是經(jīng)過測試,軟鍵盤收起后,再滾動(dòng)一下頁面,下面的留白就會(huì)消失。所以只要在輸入完畢后模擬一下這個(gè)“滾動(dòng)”的操作,就能解決問題了。
如果是用vue寫的:
<input type="text" @blur="fixScroll" placeholder="請輸入xxx"/> //methods中添加: fixScroll() { window.scrollTo(0, 0); }
因?yàn)檫@個(gè)問題只在iOS端出現(xiàn)所以使用前進(jìn)行一下判斷:
fixScroll() { let u = navigator.userAgent; let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端 if (isiOS) { window.scrollTo(0, 0); } }
總結(jié)
以上所述是小編給大家介紹的解決IOS端微信H5頁面軟鍵盤彈起后頁面下方留白的問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
使用vue-router為每個(gè)路由配置各自的title
這篇文章主要介紹了如何使用vue-router為每個(gè)路由配置各自的title,及使用vue router的方法,需要的朋友可以參考下2018-07-07vue項(xiàng)目中如何實(shí)現(xiàn)element-ui組件按需引入
這篇文章主要介紹了vue項(xiàng)目中如何實(shí)現(xiàn)element-ui組件按需引入,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05Vue+Echarts報(bào)錯(cuò)Cannot?set?properties?of?undefined?(settin
這篇文章主要介紹了Vue+Echarts報(bào)錯(cuò)Cannot?set?properties?of?undefined?(setting?‘plate‘)的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08打包組件報(bào)錯(cuò):Error:Cannot?find?module?'vue/compiler-sfc&ap
最近遇到這樣的問題,vue組件庫搭建過程中使用webpack打包組件時(shí)報(bào)錯(cuò),本文給大家分享打包組件報(bào)錯(cuò):Error:?Cannot?find?module?‘vue/compiler-sfc‘的解決方法,感興趣的朋友一起看看吧2023-12-12Element Timeline時(shí)間線的實(shí)現(xiàn)
本文主要介紹了Element Timeline時(shí)間線的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10vue 自定義指令自動(dòng)獲取文本框焦點(diǎn)的方法
今天小編就為大家分享一篇vue 自定義指令自動(dòng)獲取文本框焦點(diǎn)的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08