安卓手机软键盘弹起的问题
生活随笔
收集整理的這篇文章主要介紹了
安卓手机软键盘弹起的问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
現如今很多API對于安卓系統,iOS系統有些會兼容,有些不兼容。就拿軟鍵盤彈起的問題來說吧,如果一個系統上面有一個輸入框,底部有個按鈕(前提按鈕用了position:fixed),當我用安卓手機點擊輸入框的時候,底部的按鈕很往上頂;而iOS系統的手機則不會這樣。分析了一下,安卓手機把軟鍵盤以上的視為可視窗口,iOS系統的手機可視窗口還是原來的。解決方案如下:
<div class="btn" v-if="isShow"><span @click="submitFn()">提交</span> </div>我給這個按鈕一個顯示隱藏,當安卓手機原來的可視窗口高度大于軟鍵盤彈起的可視窗口高度,我就讓這個按鈕隱藏起來,否則的話就顯示。
在data中定義兩個變量:
data() {return {isShow: true,documentHeight: document.documentElement.clientHeight, // 默認屏幕高度} }在mounted里面調用?window.onresize()這個方法,如下:
mounted() {window.onresize = () => {const that = this;if (that.documentHeight > document.documentElement.clientHeight) {// 如果默認屏幕高度大于當前的屏幕高度that.isShow = false;} else {that.isShow = true;}};},然后在注銷window.onresize()這個方法
beforeDestroy() {window.onresize = null; },這樣就解決了我們的問題---安卓手機軟鍵盤彈起影響布局。
順帶說一句,有些樣式用了"vh"的話,安卓手機軟鍵盤彈起,這些樣式也會造成影響。
總結
以上是生活随笔為你收集整理的安卓手机软键盘弹起的问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Kakfa LAG监控
- 下一篇: 用户研究的系统方法