H5开发 Android和IOS的一些差异踩坑

1.new Date 一个时间字符串时

以下创建 date 实例的方式在 Android 是 OK 的,但是在IOS不行

new Date('2023-02-23 11:40:21')

IOS里需要把 ‘-’ 替换为 ‘/’

new Date('2023/02/23 11:40:21')

2.视口大小变化时(键盘弹起)

<meta name="viewport" content="width=device-width, 
  initial-scale=1, user-scalable=0, minimum-scale=1,
  maximum-scale=1, viewport-fit=cover">

首先确保你的head标签文档里有上面这个meta标签，它来传递ios安全区域的信息和保证页面不会被强制缩放

Android 在视口大小变化时，只需要对 window 监听 resize 事件即可

window.addEventListener('resize', fn);

但是在 IOS 里，需要额外对 window.visualViewport 监听 resize 和 scroll 事件
为什么要监听 scroll 事件？（用户在自发滚动页面或者键盘里切换输入法或切到表情面板时会触发 onScroll）

window.addEventListener('resize', fn);
window.visualViewport?.addEventListener('resize', fn);
window.visualViewport?.addEventListener('scroll', fn);

const fn = (e) => {
  // 这个viewportInfo里有变化后视口尺寸的信息，比如 viewportInfo.height
  const viewportInfo = e.target
  const innerHeight = window.innerHeight
  // 两种获取方式是等价的
  viewportInfo.height === innerHeight // true 
};

但是当 viewportInfo.height < innerHeight 时,说明用户正在切换输入法或切到表情面板，
innerHeight - viewportInfo.height 的差值就是你的页面底部被键盘盖住的高度

3.固定视口的元素需要被拖拽时

当一个元素 fixed 定位于视口（确保不要被父节点的 transform 属性影响），且手指可以触摸随意拖拽时
一般会用到 touch 事件的 event 对象，里面有 clientX,clientY 、pageX,pageY 需要被我们用到,一般使用 clientX,clientY 即可完成需求，但是在 IOS 里，键盘弹起，就会出现bug，再次拖拽元素时会发生位置偏移甚至漂移，这是因为 IOS 里键盘弹起后你的视口大小虽然变小了，但是窗口内的 html 元素，还是之前的大小，被 transform 顶到了上面，然后视口对可视区域外的元素进行 hidden，这个时候就要用 pageX,pageY 了，他会任何时候当对于你的文档进行定位，而不是相对于视口

4.视口高度和文档内容高度

当我们需要拿到整个应用的高度时，一般会用到 类似于 window.innerHeight 这样的API，因为我们的应用的高度总是撑满视口的，这样的操作也确实没问题，但是在iOS中，键盘弹起，如上面所说，文档的高度（整个应用的高度），不会发生变化，只是被顶上去了，这个时候 window.innerHeight 就是炸弹，你代码中用到这个变量的地方都会出现bug
所以遇到这种情况时，可以停止使用这种获取高度的方式，统一改为查询body的高度
window.innerHeight
document.body.offsetHeight;

const bodyHeight = document.body.offsetHeight;