vue +cli3 input移动端兼容

1.首先清除input的默认样式

input, button, select, textarea {
  border:none; //清除边框
  outline:none;//清除默认边框线
  -webkit-appearance: none;//不让他像任何的其他标签
  border-radius: 0;//默认圆角
  -webkit-tap-highlight-color: transparent; // **点击背景高亮一闪 ios**
}
input:focus{ outline:none; }

2.安卓手机底部有使用position:fixed;底部被键盘托起

下一步

data () {
    return {
      hidshow: true,
    }
} 
mounted () {
    // 解决安卓机型底部被输入框顶起问题,因为ios上正常所以判断手机系统
    //要用真机调试.浏览器的判断手机系统不精确
    const ua = window.navigator.userAgent
    if (ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1) {
      const docmHeight = document.body.clientHeight// 默认屏幕高度
      window.onresize = () => {
        var nowHeight = document.body.clientHeight// 实时屏幕高度
        if (docmHeight !== nowHeight) {
          this.hidshow = false
        } else {
          this.hidshow = true
        }
      }
    }
  },

3.ios底部空白(这个具体我没测到,之前好像发生过,没那么多手机测)

 

 // ios兼容问题
    inputLoseFocus () {
      window.scrollTo(0, 0)
    }