移动端常见问题汇总

1ios键盘弹出隐藏后存在留白

// input失去焦点时加入如下代码

  if (/iPhone|iPod|ios|iPad/i.test(navigator.userAgent)) {

      setTimeout(() => {

           document.activeElement.scrollIntoViewIfNeeded(true)

           this.openTouch()    

      },10)

 }

或者

if (detectOS().ios)  window.scroll(0,0)

https://blog.csdn.net/weixin_45152159/article/details/97247488

https://www.jianshu.com/p/4ad7108b5705

2ios input获取焦点时不出现光标

input {

    user-select: auto;

}

3IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

 changeText () {

     // IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

    if(this.value !== $(`#${this.eleId}`).val()){

        this.value = $(`#${this.eleId}`).val();

     }

}

4IOS滚动穿透问题

// 锁定body滚动条--主要解决用户弹框滚动时的穿透
Vue.prototype.closeTouch = function () {
  document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive: false}) // 阻止默认事件
}
Vue.prototype.openTouch = function () {
  document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive: false}) // 打开默认事件
}

handler: (e) => {
    e.preventDefault()
}

打开picker等弹框的时候，调用this.closeTouch()，锁定滚动，阻止默认事件，关闭弹框的时候调用this.openTouch()打开默认事件
参考:https://segmentfault.com/a/1190000022560927
5andriod 端滚动当前元素到屏幕最顶端

一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
Element 接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。

   const element = document.getElementById('hidden-field');

                _this.blankHeight = element.getBoundingClientRect().top + 'px'

                _this.showBlank = true

                if (element) {

                    const timerout = setTimeout(()=> {

                        element.scrollIntoView({

                            behavior: "smooth",

                            block:    "start",

                            // 修复安卓手机当点击位置在屏幕右侧的输入框，屏幕就会左移

                            inline: "end"

                        })

                        clearTimeout(timerout)

                    }, 0)

                }

6ios 端滚动当前元素到屏幕最顶端

      const ele = document.getElementById('hidden-field');

                _this.blankHeight = ele.getBoundingClientRect().top + 'px'

                _this.showBlank = true

                setTimeout(() => {

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

                    // 下移页面

                    window.scroll({

                        left: 0,

                        top: ~scrollHeight,

                        behavior: "smooth"

                    })

                    // 滚动单元格到视口

                    setTimeout(() => {

                        const element = $('#wrapper');

                        const input = document.getElementById('hidden-field');

                        const crossword = document.getElementById('crossword');

                        element.scrollTop(input.getBoundingClientRect().top - crossword.getBoundingClientRect().top)

                    },100)

                }, 100)

7新ipad ua不带有ipad字段导致的ipad检测失败

export const detectOS = () => {

    const ua = navigator.userAgent

    const iphone = /(iPhonesOS)s([d_]+)/.test(ua) && !window.MSStream

    const ipad = /(iPad|Macintosh).*OSs([d_]+)/.test(ua) && !iphone && !window.MSStream && 'ontouchend' in document

    const android = navigator && navigator.userAgent && navigator.userAgent.toUpperCase().indexOf('ANDROID') > -1

    const ios = iphone || ipad

    return { ios, android }

}

8安卓端做成类似ios的body滚动效果