H5手机端适配IphoneX等机型

但是如果IphoneX机型新增css属性未使用，位置：固定；top:0等直接使用常规写法，头部的导航栏会被手机自带的状态栏（显示电量信号等）挡住，底部的导航栏会被挡住通过IphoneX自带的呼吸灯（图中手机底部的白色长条）情况给用户的操作和体验带来困扰。目前针对这类问题，根据自己做过的项目，整理出了几种解决方案。我用的是vue框架。在index.html页面上，我们需要添加然后，在公共app.vue页面上，我们每个的显示components在这里被router-view代替了，所以你可以在这里处理常见的headtopbar。具体布局如下：在上面的布局中，我们为class为placeholder_top的div写如下：.placeholder_top{position:fixed;顶部：0；左：0；宽度：10rem；背景色：#303030；高度：常量（安全区域插入顶部）；高度：环境（安全区域插入顶部）；z-index:999;}这样的话，我们跟进，一个单独的组件，就不用再处理topbar的问题了。接下来我们就可以处理上面提到的header问题了。一般大部分的header都会被打包成public组件，所以这里，由于受我们app.vue页面插入元素的影响，我们header的css写法也需要稍微改动一下。header组件的页面布局如下：页面的css为：header{background-color:#303030;.title{位置：固定；顶部：0；顶部：常量（安全区域插入顶部）；顶部：环境（安全区域插入顶部）；左：0；高度：88px；z-index:999;}.placeholder{高度：88px；宽度：10rem；}}这样写，头部导航栏会位于手机状态栏下方，不影响窗口，兼容安卓和ios机型（这类兼容问题也涉及ios系统问题，不过本文暂未覆盖）先看主区的处理，因为上面的header组件已经处理完毕，所以主布局直接如下：main{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top);padding-bottom:calc(88px+constant(safe-area-inset-bottom));padding-bottom:calc(88px+env(safe-area-inset-bottom));ps：这里说明一下，下面两行是在当前页面没有底部导航栏时使用的padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);}，main里面的布局已经准备好了，直接写内容就好了，再看底部的footer布局底部内容的css如下：footer{位置：固定；底部：0；左：0；宽度：10rem；height:calc(88px+constant(safe-area-inset-bottom));高度：calc(88px+env(safe-area-inset-bottom));背景色：#303030；.foot{位置：绝对；顶部：0；左：0；宽度：10rem；高度：88px；}}这样写，底部导航脚下的内容就不会被手机自带的呼吸灯遮挡了。所以我们可以总结一下，在这次webapp适配中，我们可能需要用到如下的css写法：position:fixed;顶部：常量（安全区域插入顶部）；顶部：环境（安全区域插入顶部）；底部：常量（安全区域插入底部米）；底部：环境（安全区域插入底部）；顶部：计算（1rem+常量（安全区域插入顶部））；顶部：计算（1rem+env（安全区域插入顶部））；底部：计算（1rem+常量（安全区域插入底部））；底部：calc(1rem+env(safe-area-inset-bottom));ps：在上面的写法中，写的是：style="{position:fixposition?'absolute':'fixed'}"，这是为了解决这种固定元素在用户点击输入时定位不准的问题框，弹出软键盘。如果你有兴趣，可以研究一下。本文根据实际需要，这里不讨论不同的写法。一般布局逻辑不建议偏离太多。这样写是为了统一处理，便于维护。另外，如果有真机测试，发现布局兼容导致的样式问题，可以使用真机调试方式，使用PC浏览器调试webapp，review元素，基本可以解决大部分问题风格问题。关于真机调试，下次再写