钉钉应用中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: '';
                z-index: 9998;
                position: fixed;
                left: 0;
                bottom: -50px;
                width: 100%;
                height: 50px;
                background: #fff;
            }

这样解决了镂空,但是bottom部分还是被抬高了,这个就无解了

-----------------------分割线---------------------------------------------------
在钉钉容器中开发H5应用确实有很多头疼的问题,最大的问题应该就是适配导致的,特别是iPhone全面屏系列的到来,一些意想不到的问题随之而来,有些问题不见得是什么技术性的问题,但就是很难搞,比如这个应用页面刚进入的时候页面高度和点击交互之后的页面高度不一致导致页面跳动的问题.

最后我们给出的方案就是将各个页面的body高度用min-height写死,撑满整个页面,虽然第一次进入时还是会有页面跳动发生的概率,但目前是最有效的办法了.

希望各位有经验的同学能够分享一下经验,感谢,感谢.