分别创建屏幕上边框,右边框,下边框,左边框安全距离:
safe-area-inset-top,
safe-area-inset-right,
safe-area-inset-bottom,
safe-area-inset-left
使用:
iOS 11
padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);
iOS 11.2 beta及其后
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
兼容性写法:
padding-top: 10px;
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
与calc合用:
padding-top: 10px;
padding-top: calc(10px + constant(safe-area-inset-top));
padding-top: calc(10px + env(safe-area-inset-top));
网页使用,需要写meta标签 viewport-fit=cover