iphone x/xr/xs/xs max 微信input输入框和吸底兼容问题

问题

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)