vue2移动端软键盘挤压页面如何解决

Question

vue2-nuxt
移动端页面软键盘挤压页面
页面中使用了input输入框一点击输入框页面就被挤压
在网上找了很多办法都没有解决有高人吗可有￥解决

Answer 1

为了解决软键盘挤压页面的问题，可以试试以下解决方法：

1.将 input 输入框放在页面最上方，这样就不会被挤压了。

2.在 meta 标签中加入以下代码：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

1. 在组件内添加以下代码：

mounted() {
window.addEventListener("resize", this.resize)
},
beforeDestroy() {
window.removeEventListener("resize", this.resize)
},
methods: {
resize() {
this.isMobile = window.innerWidth <= 768
}
}

4.置 input 输入框的样式

input {
padding: 10px;
border-radius: 5px;
outline: none;
box-sizing: border-box;
border: 1px solid #ccc;
}