移动端开发兼容

苹果手机 输入框切换的时候 页面回弹滚动

let timer: any = null;

let result = '';

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS

  result = 'ios';

} else if (/(Android)/i.test(navigator.userAgent)) {  //判断Android

  document.body.style.width = window.screen.width + 'px';

  result = 'android';

}

document.body.addEventListener('focus', (e: any) => {

  if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {

    window.clearTimeout(timer)

  }

}, true);

document.body.addEventListener('blur', (e: any) => {

  if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {

    window.clearTimeout(timer)

    timer = window.setTimeout(() => {

      if (result === 'ios') {

        const height = document.documentElement.scrollTop || document.body.scrollTop || 0

        window.scrollTo(0, Math.max(height, 0));

      }

    }, 16)

  }

}, true)

 

通过 js 判断 手机机型   如果是苹果手机  每次切换input 等输入框时 回滚页面

使用     -webkit-overflow-scrolling: touch; 解决苹果手机卡顿问题

这个会导致z-index  失效    但不是所有情况下都失效   具体的失效原因 后面再看

 

window.open(url)  苹果手机无效 可以使用a 标签 href=url 打开 

或者使用window.replace()

苹果手机不支持 new Date('YYYY-MM-DD')  使用 new Date('YYYY/MM/DD')代替