采用 position absolute和fixed布局,安卓键盘顶起遮挡正常页面

h5页面采用 position absolute和fixed布局时,安卓键盘弹起时,采用absolute和fixed布局的标签也会跟随滑动,会遮挡正常页面,导致正常页面不能正常操作。

方法一是:采用 input框聚焦和失焦的时候,做一些操作,但这个方法有可能效果不是很好,因为聚焦时,软键盘可能存在不会弹起的bug。

方法二是采用 监听页面是否有变化来做一些操作,安卓软键盘弹起时,安卓键盘占据了页面的一部分空间,所以此时页面高度会比没有弹起来变小,就有了操作空间。

export default {
  data() {
    return {
      fullHeight:document.documentElement.clientHeight, // 保存初始高度
      allHeight:document.documentElement.clientHeight,
    };
  },
  mounted(){
    var that=this;
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight
        that.fullHeight = window.fullHeight
        // < 说明安卓软键盘弹起来了
        if(that.fullHeight

 

你可能感兴趣的:(vue,javaScript)