移动端开发常见问题

1、iOS无法识别的时间格式 2020-03-15 9:30:30 ，在时间中不要使用 - 短横线，当传入new Date('2020-03-15 9:30:30') 会发生报错，可以使用 / 斜杠分隔，而安卓则都可以识别。

2、iOS微信分享问题，当你开发单页应用时，网页需要运行在微信浏览器，使用了路由库比如 vue-router，首页可以正常分享，但是跳转到其他页面的则无法分享，需要把 $route.push('/about') 改成 window.href ='/about'，也就是路由跳转改成href跳转。

3、手机1像素边框显示粗细的问题。这是手机设备像素比的问题。可以参考我这篇文章《实现手机1像素边框》

4、iOS无法滚动的问题，比如弹窗，弹窗中使用了定位，弹窗里面有部分内容需要滚动，但是当触摸到滚动以外的地方再回来滚动时，这时滚动区域无法滚动，需要等待几秒手机才恢复滚动。看下面图：

黑色边框区域表示可以滚动，红色边框区域表示不可以滚动，2号箭头表示手指完全在黑色边框里面触摸滚动，这是正常情况，1号箭头表示手指既触摸了红色边框又触摸了黑色边框，然后又回来再黑色边框里面触摸滚动，这时无法滚动了，需要等待几秒才能恢复滚动。

解决办法需要更改页面布局，让 body 始终不发生滚动，让里面的元素去设置滚动。

html,body {
  height: 100%;
  overflow: hidden;
}
#app {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

5、 安卓的键盘弹起会遮挡input输入，建议设计师设计的表单普遍都在键盘的上方，大概是屏幕的1/2以上位置。

7、iOS表单手指点击无法获取焦点，出现在 iPhone6 机型上，解决办法就是给表单绑定点击事件，然后点击的时候调取 input 的 focus 方法。

8、安卓在键盘收取时表单 input 无法失去焦点，需要单独判断在键盘收起的时候调用 input 的 blur 方法。

// 解决输入框无法失去焦点
const originHeight = document.documentElement.clientHeight || document.body.clientHeight
window.addEventListener('resize', () => {
  const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight
  if (resizeHeight < originHeight) {
    // console.log('键盘弹起')
  } else {
    // console.log('键盘收起')
    const el = document.getElementsByClassName('add-input') // 需要给失去焦点的表单加上add-input类名
    Array.from(el, (item) => item.blur())
  }
}, false)

9、iOS 键盘弹起之后键盘收取，页面多出了一个空白区域，就是页面滚动的区域没有还原。

通常出现这个问题的情况键盘弹起使页面整体高度上移了，我们可以通过JS重新滚动回去。

let isReset = true
document.body.addEventListener('focusin', () => {
  isReset = false
})
document.body.addEventListener('focusout', () => {
  isReset = true
  setTimeout(() => {
    if (isReset) {
      window.scroll(0, 0)
    }
  }, 300)
})

10、 安卓和iOS都有横屏问题，手机横过来，页面布局混乱，下面的页面在手机横过来的时候图片没有完全展示，没有完全自适应，所以如果要做横屏需要单独自适应。

11、定位问题，如果使用 navigator.geolocation 原生JS获取地理位置，HTTP是不支持获取定位的，需要升级达到HTTPS。

12、安卓固定定位在底部的元素会随键盘弹起固定在键盘的上方。

修改方法就是键盘弹起让按钮隐藏，键盘收起让按钮显示，注意安卓要修改无法失去焦点的问题。