H5页面常见开发问题总结

摘要

最近在开发H5，就在开发过程中发现H5存在着一些坑，所以就总结一下在开发过程中遇到的坑以及解决办法，本文会持续的更新，同时也欢迎大家一起评论分享H5开发中遇到的坑、解决办法等。

常见的通用的H5开发问题

IOS端-H5开发问题

• 输入法收起隐藏页面留白
  问题现象：ios端软键盘失去焦点（隐藏）后，页面不会回弹，页面下方会留下输入法块的白色块。
  暴力解决方案：软键盘收起（隐藏）后，滚动一下页面，页面中的留白块块就会消失。所以只要在输入完毕后实现一下‘滚动’的操作就可以解决问题。
  React(React Hook)暴力开发解决方案（代码实现部分）：

  // 输入键盘隐藏回弹
  useEffect(() => {
   
    document.addEventListener('focusout', function(e) {
   
      let u = navigator.userAgent;
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
   
        window.scrollTo(0, 0);
      }
    })
  },[])

[注]：这个ios软键盘收起留白解决方案适应性不全（只适合表单中仅有一个input输入框且为单页面），表单中拥有多个input输入框时，切换input时也会触发scrollTo方法,造成input回弹闪烁异常问题。

• 多个input输入切换回弹闪烁
  问题现象： 存在多个input输入框且页面可以滚动时，切换输入框产生回弹闪烁，影响用户体验；同时iOS微信中依旧存在软键盘收起留白问题。
  终极解决方案： 经过调研了解到微信版本6.7.4以上会出现该问题。首先判断当前的设备以及当前微信版本号；其次当软键盘收起时，设置setTimeout方法，模拟软键盘弹起；最后获取当前滚动高度位置，软键盘收起滚动回当前滚动高度减1的位置即可。
  React(React Hook)终极开发解决方案（代码实现部分）：

 useEffect(() => {
   
    // 软键盘收起事件处理
    const onFocusout = () => {
   
      let u = navigator.userAgent;
      let isiOS