底部按钮被手机键盘顶起

原因:

底部按钮如果加上position:fixed或者absolute,是相对于父元素,而父元素的位置是相对于屏幕,手机键盘调起时,屏幕高度缩短,变成键盘上方的区域,所以父元素和子元素相对上移

方法:

监视屏幕高度,改变按钮样式

const initHeight = ref(0);
onMounted(async () => {
  initHeight.value = document.documentElement.clientHeight;
  
})
const nowHeight = ref("");
window.onresize = function () {
  nowHeight.value = document.documentElement.clientHeight;

  if (nowHeight.value < initHeight.value) {
    flag.value = true; 
  } else {
    flag.value = false;
  }
};

//当flag为true的时候具有active类名
.btn {
  width: 10rem;
  position: absolute;
  height: 1.17rem;
  bottom: 1.44rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.4rem;
  &.active {
    position: static;
    margin-top: calc(100vh - 1.07rem);
    margin-bottom: 1.44rem;
  }
}