h5移动兼容问题

h5 移动兼容问题

css

CSS 适配 iPhone x 底部小横条

  • 设置 viewport-fit=cover
  • 使用 env()
  • 详见

input iOS 不能左右滑动

使用contenteditable属性自定义 input详见

js

页面返回

  • iOS 从一个应用链接返回到前一个应用链接，页面不重新加载，安卓则相反
  • 统一设置返回重新加载，采用中间页window.location.replace跳转
  • 需要保存上一个页面的部分状态，使用sessionStorage缓存数据

flat is not a function

flat 和 flatMap 方法为 ES2019(ES10)方法，目前还未在所有浏览器完全兼容。详见Can I use

手写一个 flat 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Array.prototype.flat = function (count) {
  let c = count || 1;
  let len = this.length;
  let exe = [];
  if (this.length == 0) return this;
  while (c--) {
    let _arr = [];
    let flag = false;
    if (exe.length == 0) {
      flag = true;
      for (let i = 0; i < len; i++) {
        if (this[i] instanceof Array) {
          exe.push(...this[i]);
        } else {
          exe.push(this[i]);
        }
      }
    } else {
      for (let i = 0; i < exe.length; i++) {
        if (exe[i] instanceof Array) {
          flag = true;
          _arr.push(...exe[i]);
        } else {
          _arr.push(exe[i]);
        }
      }
      exe = _arr;
    }
    if (!flag && c == Infinity) {
      break;
    }
  }
  return exe;
};