正常情况下,当页面充满屏幕时,部分iphone底部黑条会遮挡页面内容(安卓手机上不存在这个问题)如下图:
但是其实我们想要实现的效果是这样的,不想让它遮挡内容:
这个要怎么兼容呢?
1、在样式中加入
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
2、在html的meta中加入viewport-fit=cover,小程序里的viewport-fit默认是cover
<meta name="viewport" content=