问题
1、底部吸底兼容问题，iphone x/xs max/xr 会有黑条
2、input 输入聚焦时候，input 框会下滑道下面，虚拟键盘会挡住input, 无法看到输入的内容
3、input 输入框失去焦点时，输入框会停留到当前，需要手动去往下滑动，才能回到底部
解决
样式兼容
head 设置shrink-to-fit=no viewport-fit=cover
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover" name="viewport" >
/** x/xs **/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
.Chat-foot{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
/** xr **/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2){
.Chat-foot{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
/** xs max **/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3){
.Chat-foot{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
另外对于其他top /right/left 的设置有
padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
input 输入框位置
输入时 focus 监听方法里面
var timer = setTimeout(() => {
window.scroll(0, document.body.scrollHeight)
clearTimeout(timer)
timer = null
}, 100)
完成输入失去焦点滚动到想要的位置
window.scroll(0, 0)
