H5项目IOS和安卓兼容问题

[YIngChenIt]

H5项目IOS和安卓兼容问题

安卓软键盘唤起会引起fixed布局错乱

如果我们在安卓使用fixed布局，那么布局的元素会给软键盘弹起引起布局错乱。

判断软键盘弹起的时候将fixed布局元素隐藏，软键盘收起的时候将元素显示

private bodyHeight: number = document.documentElement.clientHeight || document.body.scrollHeight

window.addEventListener('resize', this.resize)

if (isAndroid()) {
      if (document.body.scrollHeight < this.bodyHeight) { // 表示软键盘弹起
        //TODO 将元素隐藏
      } else {
        //TODO 将元素显示
      }
    }

我们也可以采用一种逆向思维的方法，当我们使用fixed布局的时候不要使用bottom，而使用top来代替

IOS new Date() 不支持2020-07-27格式的时间

IOS 中new Date() 不支持2020-07-27格式的时间,所以我们需要把时间转化为2020/07/27的格式

const time = '2020-07-27'
new Date(time.replace(/\-/g, "/"))

IOS设备 微信h5页面回退 内容不刷新的问题

这个bug苦恼了很久，场景是A项目的首页请求接口，然后接口还没有请求完成的时候跳转到B项目，然后手势返回的时候发现A页面没有重新请求接口，JS没有执行，导致没有完成请求的接口status为0

查了一些资料，猜测是iOS为了提升浏览网页的效率，可能给已浏览过的网页添加一个类似快照的东西，当返回的时候，直接调用快照展示给用户，省去了执行JS这一步骤(纯静态文件依然被缓存)。

window.addEventListener('pageshow', function (event) {
    if (event.persisted || window.performance &&  window.performance.navigation.type == 2) {
        location.reload();
    }
}, false);

IOS端兼容input光标高度

input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上, 当点击输入的时候，光标的高度和父盒子的高度一样。

我们可以设置高度height和行高line-height内容用padding撑开

.content{
    float: left;
    box-sizing: border-box;
    height: 88px;
    width: calc(100% - 240px);              
    .content-input{
        display: block;
        box-sizing: border-box;
        width: 100%;
        color: #333333;
        font-size: 28px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

IOS端部分机型打开网页一直重新重定向，直到浏览器崩溃

线上出现一部分问题，i7、i8的最新系统，在用浏览器打开我们的h5网页的时候一直在重定向，重复打开知道浏览器崩溃。一开始花了好多时间在查找会不会是一些语法ios不兼容导致，但是无功而返。最后通过二分法的方式定位到项目的一个国际化接口，因为国际化接口返回的数据键值对太多，导致部分内存不足的手机浏览器请求的时候导致浏览器崩溃。解决方法是请求数据量大的接口时候不通过键值对的方式返回，而是通过返回jsonstring的方式，减少ios浏览器对数据的解析

【Taro】async await语法低版本微信基础库不兼容

默认taro没有处理async await语法，导致转出来的代码微信低版本基础库不兼容，出现部分用户白屏现象。
处理方式是添加对应的处理让转换出来的代码兼容低版本基础库

 plugins: [
        "transform-decorators-legacy",
        "transform-class-properties",
        "transform-object-rest-spread",
        ['transform-runtime', {
          "helpers": false,
          "polyfill": false,
          "regenerator": true,
          "moduleName": 'babel-runtime'
        }]
      ]