css完美解决网页在iphoneX的头部刘海显示问题

一、解决iphonX白条,网站扩展到整个屏幕

网页在iphoneX的浏览器屏幕显示上，默认情况下在头部的2侧会出现白条背景，网站被限制在了一个“安全区域”内，移除白色背景的方法

方法一：设置body的背景色：

.body{

     background-color：#f00;

}

方法二：添加mate属性viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

说明viewport-fit有三个值：

方法三：设置safe-srea-inset-*确保安全边界

改属性值适用于：margin、padding ，以及绝对定位的 top 或 left。以padding为例：

.page{

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

    padding-right: constant(safe-area-inset-right);

    padding-bottom: constant(safe-area-inset-bottom);

    padding-left: constant(safe-area-inset-left);

}

二、实现元素滚动自动环绕iPhone X"刘海"

1.环绕齐刘海滚动实现原理

CSS Shapes中有个CSS属性名为shape-outside，可以让内联元素以不规则的形状进行外部排列，其语法如下（参考自MDN）

/* 关键字值 */

shape-outside: none;

shape-outside: margin-box;

shape-outside: content-box;

shape-outside: border-box;

shape-outside: padding-box;

/* 函数值 */

shape-outside: circle();

shape-outside: ellipse();

shape-outside: inset(10px 10px 10px 10px);

shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url>值 */

shape-outside: url(image.png);

/* 渐变值 */

shape-outside: linear-gradient(45deg, rgba(, , , ) 150px, red 150px);

shape-outside属性要想生效，本身需要是浮动float元素。本文demo效果实现使用的是shape-outside:polygon()，通过点坐标勾勒出和齐刘海形状相似的多边形形状，CSS代码为：

.shape {

  float: left;

  shape-outside: polygon( ,  150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px,  330px,  );

}

列表元素就会自动环绕这个形状排列，也就是自动避开了齐刘海区域。然后，只要搞个假的iPhone X的齐刘海图片覆盖在区域上就可以了。至此，一个静态的列表环绕齐刘海的效果就完成了。下面关键的问题是如何让滚动的时候，列表元素动态的跟着环绕呢？由于shape-outside所在的元素是浮动元素，因此，必定会跟着容器一起滚动，我们需要的效果是我们所绘制的这个刘海区域需要是固定的，怎么办？此时，我是借助JavaScript处理的。原理很简单，监听容器的滚动事件，让我们的shape-outside绘制的区域实时偏移滚动的大小。此时肉眼看上去的效果就是shape-outside区域永远固定在了滚动容器clientHeight的中间。整个效果就这么实现了，相关JS如下：

box.addEventListener('scroll', function () {

  var scrollTop = box.scrollTop;

  // 滚动偏移应用在shape-outside上

  shape.style.shapeOutside = 'polygon(0 0, 0 '+ ( + scrollTop) +'px, 16px '+ ( + scrollTop) +'px, 30px '+ ( + scrollTop) +'px, 30px '+ ( + scrollTop) +'px, 16px '+ ( + scrollTop) +'px, 0 '+ ( + scrollTop) +'px, 0 0)';

});

办公资源网址导航 https://www.wode007.com

更详尽的代码尽在demo页面

2.CSS Shapes环绕iPhone X刘海的其它更简易方法

如果我们的技术选型是更看重简单易懂，而不是资源消耗与占用，还可以使用shape-outside:url(image.png)语法实现类似的效果，其中'image.png'就是用来被环绕的图片，环绕与否是基于计算alpha通道决定，用句简单的话描述，就是沿着图片非透明区域环绕。由于使用url()的形状计算是基于图片元素，和inset(), circle(), ellipse()或者polygon()这些基础形状方法的计算性质不一样，因此，可以直接使用垂直方向的margin进行偏移。这要比polygon()这样实时计算坐标位置要好理解的多。我们不妨看下CSS和JS代码，如下：

.shape {

  float: left;

  shape-outside: url(liu-outside.png);

  margin-top: 150px;

}

box.addEventListener('scroll', function () {

  var scrollTop = box.scrollTop;

  // 滚动偏移应用在margin-top上

  shape.style.marginTop = ( + scrollTop) + 'px';

});

可以看到，当我们滚动容器的时候，改变的就一个marginTop值就好了；而上面的 shape-outside:polygon()实现需要同时改变多个坐标值。