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有三個值：

contain：視口完全包括網頁內容，這意味着fixed定位的元素被包含在了iOS 11的安全區內
cover：網頁內容完全覆蓋視口，這意味着fixed定位的元素將被固定到視口，即它們也可能會被覆蓋，這恢復了我們在ios 10上的行為
auto：默認值，和contain相同

方法三：設置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(255, 255, 255, 0) 150px, red 150px);

 

shape-outside屬性要想生效，本身需要是浮動float元素。 本文demo效果實現使用的是shape-outside:polygon()，通過點坐標勾勒出和齊劉海形狀相似的多邊形形狀，CSS代碼為：

.shape {
  float: left;
  shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);
}

 

列表元素就會自動環繞這個形狀排列，也就是自動避開了齊劉海區域。 然后，只要搞個假的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 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + 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 = (150 + scrollTop) + 'px';
});

 

可以看到，當我們滾動容器的時候，改變的就一個marginTop值就好了；而上面的 shape-outside:polygon()實現需要同時改變多個坐標值。