在页面的meta标签中添加 viewport-fit=cover 属性
- viewport-fit=cover 页面内容填充整个屏幕
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
在css样式中 添加样式
1@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { 2 footer{ 3 padding-bottom: constant(safe-area-inset-bottom); 4 padding-bottom: env(safe-area-inset-bottom); 5 } 6}
注:
- @supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式。
- env()和constant()，是IOS11新增特性,用于设定安全区域与边界的距离,有4个预定义变量：
- safe-area-inset-top：安全区域距离顶部边界的距离 。 //为导航栏+状态栏的高度 88px
- safe-area-inset-bottom：安全区域距离底部边界的距离。 //如果未竖屏时为0
- safe-area-inset-left：安全区域距离左边边界的距离。 //如果未竖屏时为0
- safe-area-inset-right：安全区域距离右边边界的距离。 //为底下圆弧的高度 34px
- env() 和 constant() 只有设置 viewport-fit=cover 的时候才生效。
- 在实际使用中，可以把这些值添加到margin或padding中，可以添加四个项，也可以只添加你所需要的。比如顶部或左侧。
本文转自 https://www.jianshu.com/p/799c54254da6，如有侵权，请联系删除。