iphoneX全面屏做整屏网页的适配问题

iphoneX 全面屏做整屏网页的适配问题

随着小米 Mix 和 iphoneX 的出现, 全面屏越来越多,所以前端慢慢也要考虑全面屏的适配问题了

今天 UI 跟我过了一下 H5 的官网,让我参考了医联的官网

抱着学习的态度,发现医联没有考虑全面屏的整屏网站还是存在了一点问题的

加载失败

目前思考的几种解决方案

1.flex 把元素均分,但是有些业务下可能满足不了

2.和产品商榷,做一个尽量适中的上下留白,图片和内容做居中处理

3.全面屏单独切一套图,用全面屏的图,把内容往两边撑,达到满屏

4.写一套单独的 class 来控制每一屏的间距,Js 判断页面高度来换 body 上的 class 来控制使用哪一套 class

目前想到了这几种解决方案,如果您有其他更好的方案,欢迎在下方留言,以帮助后来者解决问题


如果内容对您有帮助,不妨请作者喝杯咖啡