手机端遇到的问题记录

1、使元素滚动到当前视口顶部：

定义ref: private refScroll: { current: HTMLDivElement | null } = React.createRef();
this.refScroll.current.scrollIntoView({
behavior: ‘smooth’,
});

2、iphoneX 安全区问题

1） 设置网页在可视窗口的布局方式

新增 viewport-fit 属性，使得页面内容完全覆盖整个窗口：
viewport-fit : contain(可视窗口完全包含网页内容)
cover(网页内容完全覆盖可视窗口)
auto(默认值，效果同contain)
env() constant() ios11新特性。webkit的一个css函数，用于设置安全区域与边界的距离
env()/* 兼容 iOS >= 11.2 /
constant()/ 兼容 iOS < 11.2 */ (两者需同时存在且不能置换顺序)
参数：
safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离
附： 当viewport-fit值为cover时才可使用env() constant()

2）页面主体内容限定在安全区域内

body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}

3）fixed元素适配

添加padding-bottom(不设置外层元素的高度，由内部元素撑起高度)
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}

给高度添加安全区域
{
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom));
}

添加一个div块撑起安全区域，高度设置为安全区高度
{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background-color: #fff;
}