【ionic】 - web app iPhone X 适配

本文主要讲解： 原生的iOS项目iPhone X适配很简单，今天我主要讲解一下web APP 应用的适配

1、熟悉iPhone X的屏幕：

2、适配思路：

 2.1  适配启动图  （iPhone X需要一张1125 * 2436）一张即可实现cover 全屏覆盖效果，但是出现top、bottom不和谐的情况，这是iPhone X的顶部刘海20px和底部home感应区导致，我们需要看  2.2的解决方案  

 2.2  将项目加入到safe area (安全区)

苹果提供函数：

constant(safe-area-inset-top)!important;

env(safe-area-inset-top)!important;

关于这两个函数的讲解，请参考：

如上图，本人理解 这两个函数功能一致，env() 兼容  iOS11.2 以上版本

官方解释： https://webkit.org/blog/7929/designing-websites-for-iphone-x/?hmsr=funteas.com&utm_medium=funteas.com&utm_source=funteas.com

以上是iPhone X 的设计原理和我们参照h5界面的适配的解决方案，接下来我用自己ionic项目给大家讲解一下：

1、适配顶部刘海：在工程的主题文件里加入以下代码：

ion-header{

ion-navbar:nth-child(1){

padding-top:constant(safe-area-inset-top)!important;

padding-top:env(safe-area-inset-top)!important;

}

}

 解释：

pading-top:constant(safe-area-inset-top)!important;   ：  顶部切20px === safe-area-inset-top

padding-top:env(safe-area-inset-top)!important;        :   顶部切20px === safe-area-inset-top

!important 自己百度

2、适配底部home感应区：怎么说呢，对于不同的工程比较复杂：

因为我们将将顶部下移20px,底部会被home感应区遮住，影响体验，我们上移34px发现home感应区的颜色默认是黑色，很难看。我的项目的解决方案是在主界面底部设置一个我们UI设计的颜色，子界面的话动态的改变这个底部感应区的颜色与当前界面的设计保持协调：

直接上代码吧：

2.1 在 iphone.scss 加入  全局 

我的项目底部主要存在这三种颜色。

2.2 主界面HTML使用css 选择器 根据是哪个界面选择不同的home感应区背景颜色： 

2.3 主界面ts 通过一个维护一个服务的列表实现

2.3 子界面的 写法：

2.4 服务：

思路就是这样，参考Designing Websites for iPhone X，ionic工程复杂，底部的适配不同的工程不一样，这里仅仅作为参考，如果有疑问我们可以一起交流，如果有不对欢迎指点。