uni-app 开发H5软键盘会顶起底部按钮的解决

1. 解决方案

网上有不少解决这个问题的办法，大致的思路就是通过JS监听高度的改变，来确定输入法是不是弹出了，然后对不希望展示的内容做特殊的处理。例如这篇文章就写得很好移动端那些戳中你痛点的软键盘问题及解决方法 - 掘金 (juejin.cn)

但是其实有更简单的办法可以解决，通过媒体查询可以纯CSS就解决这个问题。添加CSS代码如下

代码语言：javascript

复制

@media (min-aspect-ratio: 13/20) {
  .button {
    display: none;
  }
}

原理：通过媒体查询min-aspect-ratio 当屏幕的宽高比大于13/20的时候，就会自动隐藏内容

2. 运行在PC端会底部按钮会消失

   由于当屏幕的宽高比大于13/20的时候就会自动隐藏内容，所已需要判断当前运行在移动端还是在电脑端

<view class="add-btn" :class="{'add-btns':isPhone}" :style="{bottom: heightSafeAreaInsetss + 'px'}">
		<view class="add-btn-text">
			<view class="con-left" @click="$disableDoubleClick(doSubmit, 'isOption',1)">
					仅保存
			</view>
			<view class="con-right" @click="$disableDoubleClick(doSubmit, 'isOption',2)">
					提交审核
			</view>
	</view>
</view>



     data() {
         return {
            isPhone: false,
          }
       }


created() {
	this.platform();
}



platform() {
	if (typeof navigator !== "undefined") {
			this.isPhone = navigator.userAgent.toLowerCase().indexOf('mobile') !== -1
			return
	}
        const {
		windowWidth
        } = uni.getSystemInfoSync()
	this.isPhone = windowWidth <= 500
}