问题

iphoneX系列手机底部有个横条，会挡住正常页面内容，开发时，需要对这类机型做兼容。

解决

思路

在底部添加一个div占位元素，判断当前为iphoneX机型时，设置占位元素高度，留出安全距离。

代码（react+scss）

组件IPhoneXBottomHeight：

// IPhoneXBottomHeight/index.tsx
import React from 'react';
import useStyles from 'isomorphic-style-loader/useStyles';
import s from './index.iso.scss';
const IPhoneXBottomHeight = () => {
  return (
    <div className={s.iphonexBottomHeight} />
  );
};
export default IPhoneXBottomHeight;

// IPhoneXBottomHeight/index.iso.scss
@media only screen and (min-device-height: 812px) {
  @supports (-webkit-overflow-scrolling: touch) {
     .iphonexBottomHeight {
       height: constant(safe-area-inset-bottom);
       height: env(safe-area-inset-bottom);
     }
  }
}

组件使用：

import React from 'react';
import { observer } from 'mobx-react';
import IPhoneXBottomHeight from 'src/IPhoneXBottomHeight';
const A = () => {
  return (
    <MainContent />
    <IPhoneXBottomHeight />
  );
};
export default observer(A);

知识点

iphone各机型开发尺寸