IOS微信瀏覽器鍵盤擠壓頁面不回彈解決方法

import { Directive, ElementRef } from '@angular/core';


@Directive({
  selector: '[appResetPage]'
})
export class ResetPageDirective {

  constructor(el: ElementRef) {

    // 解決鍵盤擠壓頁面後不復原的問題，input失去焦點後，復原
    // 是否是蘋果手機

    /*
     * iOS12以上版本，微信打開鏈接點擊輸入框獲取焦點後虛擬鍵盤自動彈出
     * 收起鍵盤，原來彈出鍵盤的位置一片空白，頁面沒有自動適應整個屏幕
     * 解決辦法：
     * 在當前頁面滾動的位置上下滾動1px的距離即可實現頁面的自適應
     */
    document.body.addEventListener('focusout', () => {
      // 軟鍵盤收起的事件處理
      const ua = window.navigator.userAgent;
      const app = window.navigator.appVersion;
      // $alert('瀏覽器版本: ' + app + '\n' + '用戶代理: ' + ua);
      if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        // $alert('ios端');
        let currentPosition, timer;
        let speed = 1;
        timer = setInterval(function () {
          currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
          currentPosition -= speed;
          window.scrollTo(0, currentPosition); // 頁面向上滾動
          currentPosition += speed;
          window.scrollTo(0, currentPosition); // 頁面向下滾動
          clearInterval(timer);
        }, 100);
      } else if (ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1) {
        // alert('android端');
      }
    });

  }
}