简述：Iphonex刘海适配方案（项目常用）是继iphonex之后推出的新概念。安全区是指一个可见的窗口范围，安全区内的内容不受圆角、直刘海、小黑条的影响。刘海屏在iPhoneX上Hybrid页面的适配也是每个前端开发的小伙伴都会遇到的问题。今天，我就记录一下刘海屏改编的一些心得。H5刘海平-基础很明显。在讨论适配之前，我们的页面一般分为两类：1、H5页面使用原生app的NavigationBar导航栏。此时状态栏和导航栏都是原生控件，我们只需要重点调整底部小黑条处的高度差即可。2、H5页面在iOS中占据全屏页面。在这种情况下，除了底部的小黑条，我们还需要对页面上部与状态栏接触的部分进行处理，防止内容出现在状态栏上。1、刘海屏展示iPhone8之前的常规屏幕与刘海屏的SafeArea对比。二、屏幕尺寸适配H5Notch-实践一、原理及源码1、viewport-fitiOS11新特性，为了适配iPhoneX等Notch，苹果对现有的viewportmeta标签进行了扩展，即用于设置网页中可见窗口的布局模式，可以设置三个值：1）默认为auto；2）包含可见窗口完全包含网页内容；3）覆盖网页内容完全覆盖可见窗口，即页面完全填满屏幕；2、常量(safe-area-inset-*)函数是iOS11的新特性，Webkit的一个CSS函数，用于设置和获取安全区域到边框的距离。预定义变量有四个（单位为px）：1）safe-area-inset-left：安全区域到左边界的距离，适应landscape；2)safe-area-inset-right：从安全区域到右边界的距离，适应横向；3）safe-area-inset-top：安全区域距离上边框的距离，竖屏下的刘海为44px，iphone6系列为20px，竖屏刘海适配的关键；4）safe-area-inset-bottom：安全区域与底部边框的距离，竖屏下34px，竖屏小黑条适配的关键；适配的核心是：通过constant()获取不安全margin，结合padding或margin控制页面元素避开不安全区域。2.页面适配代码1）在将刘海屏适配到页面之前，我们首先要在页面的meta中添加一个新的值：2）设置高度：//是导航栏+状态栏的高度88pxpadding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top);//是底部的高度arc34pxpadding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);扩展：css函数env()和constant()都是webkit中的css函数，变量function可以直接使用，只在webkit内核下支持。1)env函数：必须在ios>=11.2上支持；2）常数函数：必须是ios<11.2才能支持H5刘海屏-机型适配1、精确到机型适配，通过宽高和像素比类型判断机器，也可以做具体适配：//*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************375px)and(device-height:812px)and(-webkit-device-pixel-ratio:3),//iphone12,iphone12Proonlyscreenand(device-width:390px)and(device-height:884px)and(-webkit-device-pixel-ratio:3),//iphoneXsMax,iphone11ProMaxonlyscreenand(device-width:414px)and(device-height:896px)and(-webkit-device-pixel-ratio:3),//iphoneXR,iphone11onlyscreenand(device-width:414px)and(device-height:896px)and(-webkit-device-pixel-ratio:2),//iphone12ProMaxonlyscreenand(device-width:428px)and(device-height:926px)and(-webkit-device-pixel-ratio:3){//头部缺口settings.title-bar{padding-top:constant(safe-area-inset-top);//导航栏+状态栏的高度为88pxpadding-top:env(safe-area-inset-top);}//底部缺口设置.tab-bar{padding-bottom:constant(safe-area-inset-bottom);//底部圆弧高度为34pxpadding-底部：env（安全区域插图-bottom);}}2、踩坑日志1）通过css3的calc计算距离padding-top:calc(constant(safe-area-inset-top)-68px);padding-top:calc(env(安全区域顶部）插图顶部）-68px）；使用yarninstall或npminstall安装依赖包时，会报错：解决方法：使用cnpminstall2）h5兼容iPhoneX底部缺口。刘海屏会屏蔽底部按钮，你只需要加个代码就可以解决问题。.iPhonex-style{bottom:evn(safe-area-inset-buttom);}【编辑推荐】鸿蒙，如果你有安卓shell呢？为什么Kubernetes会放弃Docker？从“PPT系统”到现实：HarmonyOS，你真香吗？你用过这6个PythonIDE和代码编辑器吗？优雅终止Kubernetes实践
