iPhoneX 安全区域 safe-area-inset-*样式不生效

最新推荐文章于 2024-05-31 09:48:20 发布

wgaoxian

最新推荐文章于 2024-05-31 09:48:20 发布

阅读量3.7k

点赞数 2

文章标签： css3 javascript

本文链接：https://blog.csdn.net/wgaoxian/article/details/123636601

版权

*iPhoneX 安全区域 safe-area-inset-样式不生效
解决办法：添加 meta name=“viewport” 中增加viewport-fit=cover内容

//viewport-fit=cover
<meta name="viewport" id="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">

H5页面在ios上面底部安全区域按钮样式兼容

 padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
 padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

注意：样式父元素不能有高度，可以给子元素高度

.vipBtn {
    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
    position: fixed;
    width: 100%;
    bottom: rem(0px);
    left: rem(0px);
    background-color: #fff;
    .btn {
      margin: rem(0px) rem(25px);
      color: #fff;
      font-size: rem(32px);
      text-align: center;
      z-index: 999;
      height: rem(100px);
      line-height: rem(100px);
    }
  }