前端h5适配刘海屏和滴水屏

前端适配苹果刘海屏，安卓刘海屏水滴瓶

其实w3c早就为我们提供了解决方法（CSS3新特性viewport-fit）

在w3c.org官方给出的关于圆形展示(Round display)的标准中， 提到了viewport-fit这一属性，这个属性表明了对于某些屏幕并不是矩形形状的设备的时候浏览器该如果进行显示。LOL传送:viewport-fit官方参考文档

CSS3新特性env以及var预定义变量。

在定义以后viewport-fix以后， 浏览器会自动生成四个padding变量，即用来将页面向内挤压到可以正常显示的位置。这个时候需要用到env或者constant来将变量转换成CSS属性值并且赋值给属性。ps:env好像还在开发中，好像只支持IOS 11.2及以上。目前比较稳妥的方法就是constant和env一起使用。LOL传送：env和var变量说明

详细做法

viewport-fit取值如下：
auto	默认：viewprot-fit:contain;页面内容显示在safe area内
cover	viewport-fit:cover,页面内容充满屏幕

首先我们先加上这个属性
viewport-fit=cover"（最重要的代码为，不加下边的代码可能出现问题）

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

 

 

/* body 在横屏底下和竖屏底下一定要做好定位，不然*/
    /* 竖屏底下的查询 */
    @media screen and (orientation: portrait) {
        body {
            /* 防止页面被刘海遮住 */
            padding-top: constant(safe-area-inset-top);
            //以防万一写一个你本身适配其他手机的
            padding-top:0px;
        }
    }
    /* 横屏底下的查询 */
    @media screen and (orientation: landscape) {
        body {
            /* IOS 11支持*/
            padding-right: constant(safe-area-inset-right);
            padding-left: constant(safe-area-inset-left);
            padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px 
            /*IOS 11.2版本版本支持*/
            padding-right: env(safe-area-inset-right);
            padding-left: env(safe-area-inset-left);
            padding-bottom: env(safe-area-inset-bottom);
            //以防万一写一个你本身适配其他手机的
            padding-right:0px;
            padding-left:0px;
            padding-bottom:0px;
        }
    }
如果用header和footer请单独定义