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

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

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

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

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

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

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

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;
}

引用自 chatGPT
设置Meta标签，增加viewport的缩放
设置input标签的属性text-align和line-height，将光标固定在输入框的最底部
给页面的body加上类名后在css中设置页面在按键弹出时的缩小比例
设置一个固定的位置，当软键盘弹出的时候滚动这个位置，利用定位设置bottom：0使输入框处于可见状态
通过监听window.onresize事件，进行高度调整

你给移动端页面设置最小高度试试