h5兼容问题记录

1、flex的gap无效

需使用margin等处理

2、弹窗滚动下面跟着滚动

IOS - body添加和释放overflow:hidden
Android - https://www.npmjs.com/package/body-scroll-lock

import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
const isIOS = ref(browser.isIOS()); // 替换成自己监听IOS的方式

const modalRef = ref<HTMLDivElement | null>(null);

onMounted(() => {
  if (!isIOS.value) disableBodyScroll(modalRef.value);
});

onBeforeUnmount(() => {
  if (!isIOS.value) enableBodyScroll(modalRef.value);
});

3、文本被隐藏

宽度需确定不同的不一样处理

4、横屏/缩放导致显示不全

无法控制横屏设置，暂未找到解决方案，实际上是分辨率的适配问题；

5、问题描述：iOS中视频在H5页面播放时会自动切换至全屏模式

解决方法：IOS10及以后,在 video标签页中只包含 webkit-playsinline 是不够的，需要再增加 playsinline.

H5端代码：x5-video-player-type='h5' x5-video-player-fullscreen='true' playsinline webkit-playsinline

说明：
iOS10以上H5视频不自动全屏播放识别 playsinline这个属性
iOS10以下H5视频不自动全屏播放识别 webkit-playsinline这个属性

6、iphone8plus intersection-observer 不兼容

懒加载全部失败？？？
intersection-observer npm polyfill包 - 未实践
功能是实现资源懒加载，切换为检测是否存在后的原生懒加载scroll事件支持；

7、荣耀V10上面的部分盖下来