钉钉应用中H5开发适配iphonex

钉钉容器中开发H5应用时适配iphonex

首先要了解iphonex屏幕尺寸的一些知识,可以参考H5页面WebView在Iphonex的适配,有了对iphonex屏幕的基本认识后,适配就相对简单一些了.

盗图一张:

bottom部分fixed定位,底部会造成镂空,此时我们在viewport中加入viewport-fit=cover,html和body设置高度100%,可以将bottom部分下移到最低端.
这种方法本来在pc或者移动浏览器中打开是没问题的,但是在钉钉中就出现了一些问题,如果页面有样式改变,比如调用了手机的软键盘,然后退出,bottom栏神奇的被提高了60几个像素,提高的部分为镂空,没有颜色的那种,一直没想明白怎么回事.
唯一猜测有可能是钉钉开发时对iphonex做了什么不可描述的事情.
解决方案就是在html元素上加上下面的class,位置可以自己调整.

 .has-bottombar:after {
   
                content: