官方文档如下:https://opensupport.alipay.com/support/knowledge/31867/201602476696?ant_source=zsearch
按照官方文档的操作较为复杂。
而对于position: fixed
的可交互组件,如果渲染在iPhone X的安全区域外,容易误触 Home Indicator,应当把可交互的部分都渲染到安全区域内。
建议使用以下acss进行兼容
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
如果你想在安全区域外再加多少rpx 也可以这样操作嗷~
padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
其他性能优化:
惯性滚动会使滚动比较顺畅,在安卓下默认有惯性滚动,而在 iOS 下需要额外设置-webkit-overflow-scrolling: touch
的样式