问题

设置iphonex底部fixed固定，当页面滚动时，fixed定位部分也随之滚动。

解决办法

1.头部要设置 viewport-fit=cover

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

2.在css中设置如下样式，其中footer是定义的fixed底部定位。

/* iphoneX */
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    @supports (bottom: env(safe-area-inset-bottom)){
        body,
        .btn-footer{
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
  }

注释

[viewport-fit=cover说明]（developer.mozilla.org/zh-CN/docs/… [原文链接]（www.jianshu.com/p/d9ca9f85d…