适配方案

安全区

meta viewpoint 内添加 viewport-fit=cover，即

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

注：ios 设备一定要添加这个属性，可以有效避免莫名的点击穿透和定位问题

页面高度

距离顶部44px，body原有高度100%，无法撑开整个屏幕，使用100vh代替。

titlebar

距离顶部44px,也就是在原有20px的基础上，在添加24px 例如

@media only screen
   and (device-width: 375px)
   and (device-height: 812px)
   and (-webkit-device-pixel-ratio: 3) {
       #linesInfo{
           padding-top:24px;
       }
   }

底部元素

为避开虚拟home键 ，距离底部34px ,按钮和底部之间不要留有留有空白，使用按钮色填充，写法举例

/*适配iPhone X ,iphone Xr ,iphone XS*/
@media only screen
    and (device-width: 375px)
    and (device-height: 812px)
    and (-webkit-device-pixel-ratio: 3),
    only screen
    and (device-width: 414px)
    and (device-height: 896px)
    and (-webkit-device-pixel-ratio: 2),
    only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3)