移动端问题整理

写H5页面总会碰上一些兼容性问题，之前也碰到了许多问题，但是都没有做一个完整的记录，之后碰到的问题都会记录下来。

1.使用table画表格时出现iOS 边框显示不完全
解决方法：有搜到相关问题，所给出的方法有：设置边框为1以上就可以了（尝试不成功），设置表格宽度为基数值如1，3，5（尝试不成功），然后自己想着办法设置td的边框为1px，然后解决。

2.使用移动端拖动组件react-draggable-tags的拖动和滚动区分
使用这个拖动组件会导致移动端无法区分到拖动还是滚动事件，解决办法，在拖动组件同级设置一个div，这个div高度和拖动dom结构等高，层级覆盖住需要覆盖的位置即可。

3.移动端使用location.reload(Boolean)方法加载页面没有重新请求接口
现状：部分安卓手机出现使用了该方法刷新页面之后没有请求接口
解决：使用window.location.href = location.href来重新加载页面
原因：在js文档中介绍href是location对象的一个属性，reload()则是location对象的方法。所以对于href，可以为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。对于reload()则是重新加载当前文档，如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
但对于安卓手机微信中的浏览器，reload只是从缓存中装载文档，所以当你使用该方法，是失效的。

4.ios中的z-index失效问题
原因设置了iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效，适情况去掉即可

5.html2canvas在ios中截图时截取img失效
解决方法：通过设置一个div将图片设置成该div的背景图即可解决

6. 解决键盘弹出后挡表单的问题

window.addEventListener('resize', function() {
    if(document.activeElement.tagName === 'INPUT' ||
      document.activeElement.tagName === 'TEXTAREA'
    ) {
      window.setTimeout(function() {
        if('scrollIntoView' in document.activeElement) {
          document.activeElement.scrollIntoView();
        } else {
          document.activeElement.scrollIntoViewIfNeeded();
        }
      }, 0);
    }
  });

7.解决ios12及以上，微信浏览器中，键盘收起，底部空白的问题
解决方式：判断当前环境，主动触发一下滚动事件

(function () {
    if(platform === 'ios' && _includes(['wechat', 'miniApp'], ua)) {
        document.body.addEventListener('focusout', ()=>{
            // 滚动一下就会恢复
            let currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
            window.scrollTo(0, currentPosition + 1);
        });
    }
}());

8.解决ios14 APP内 this.props.history.go()/ goBack() 不生效问题
解决方式：需要记录之前的路由，使用setTimeout进行延时跳转

setTimeout(()=> {
     this.props.history.push({
         pathname: '/Url',
         search: '?queryparams',
     });
 }, 100)