前端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請單獨定義