解决安卓和ios中, input失去焦点后页面高度改变,页面出现部分空白

页面是采用100%高度布局, 下面代码中的html,body,app都是100%高度

同时我认为这中布局方式也是本篇问题出现的原因, 若所有的内容都是流式布局,页面body存在和内容一样的高度,应该不会出现这么复杂的问题.

dom结构

html
body
    app
        content

解决方法如下

mounted() {
    // 安卓手机软键盘弹出会修改页面的高度,这里当软键盘弹起的时候,重新计算高度
    window.addEventListener('resize', this.reNormalPage);
    //软键盘收起事件
    document.body.addEventListener('focusout', this.reNormalPage);
  },
  methods: {
    // 在安卓和ios上,因为软键盘弹起造成的页面问题解决方法(防止软键盘弹起截断页面高度)
    reNormalPage () {
      const appNode = document.getElementById('app');
      // 因为在安卓和ios及ios各个版本上运行结果存在差异,所以取一下三个值的最大值作为页面高度,防止软键盘弹起截断页面高度
      const height = Math.max(document.body.offsetHeight, appNode.offsetHeight, window.innerHeight);
      appNode.style.height = height + 'px';
      // 解决IOS系统中, input失去焦点时, 页面高度被截断,并出现部分白屏的问题
      window.scrollTo(0, 1);
      window.scrollTo(0, 0);
    }
  }

首先要声明,安卓手机和ios9及其以下,软键盘弹起会截断页面高度,也就是会把页面高度变为原来的高度减掉软键盘的高度,但是ios10及其以上不会.

1. 此处监控了2个状态, resize, focusout

(1) focusout(软键盘收起事件)

• 在ios9及其以下, 软键盘截断页面高度, 这里手动设置为原来的高度
  
• ios10及其以上,则不会截断页面高度,这里的设置也就是将原来的高度重新设置一下,不会有问题

(2)resize

之所以监控resize,是因为在ios设备上,focusout是在软键盘收起后触发的,收起后重置页面高度没问题.
但是, 安卓手机的focusout是在软键盘收起前触发的,收起前触发重置页面高度无用,当软键盘收起后,页面依然被截断,所以监控了resize事件,在resize中重置页面高度.

2. 页面高度被截断,并出现部分白屏的问题

window.scrollTo(0, 1);
window.scrollTo(0, 0);

这里是为了应付ios12上(不知道其他机型有没有), 页面没有被resize,且页面高度未改变,只是input失去了焦点,导致页面出现了部分留白,但是稍稍滑动一下就能没了留白,所以此处做了上述代码.