本文介绍了在钉钉应用中开发H5页面时遇到的iPhone X适配问题，包括屏幕尺寸理解、底部fixed定位造成的镂空及解决方法。针对钉钉容器中的适配问题，如页面高度变化后bottom栏位置异常，提出了设置viewport-fit和html/body高度的解决方案，并讨论了使用min-height固定body高度来减少页面跳动的问题。
钉钉容器中开发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: 
最低0.47元/天 解锁文章
扫一扫
875
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
