H5开发遇到的问题
大约 1 分钟
H5 开发遇到的问题
ios 头部、底部安全区域
- 通过 env + css 属性实现
- 飞书小程序中,通过 api 获取到安全区域,自行设置 padding
ios 禁止滚动溢出效果/橡皮筋效果
body {
/* 需要滚动的容器再添加 overflow: scroll */
overflow: hidden;
}
touch 事件 preventDefault 问题
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#使用_passive_改善滚屏性能
ios input focus 放大效果禁止
<meta name="viewport" content="maximum-scale=1" />
ios 虚拟键盘问题(VisualViewport)
iOS 键盘难题与可见视口(VisualViewport)API
Audio API 在 ios < 17 有问题
audio API 在 ios 15 16 左右使用会有编解码成功但无法发声的问题,这块目前没看到有好的解法,应该就是一个 webkit 的兼容性问题
ios getUserMedia
每次都要重新申请权限
在 iOS 中 safari 每次使用 getUserMedia 都要重新申请权限,这块也没有避开的方法,如果是自己开发的 iOS app (iOS 15+)可以在 xcode 里面设置 permission plist 设置一个静默授权,就可以一次授权一直使用了。