廢話不多說，直接上干貨。本文主要解決如何通過媒體查詢適配所有iphone劉海屏。
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- viewport-fit 有3個值(contain，cover，auto),默認值是contain, 需要設置為 cover ,css里面的safe-area-inset-***（***代表left,right,top,bottom）才會生效 --> <meta name="viewport" content="viewport-fit=cover"> <title>兼容劉海屏寫法</title> </head> <body> <div class="page-content"> <div class="page-content-inner"></div> </div> </body> </html>
關於上面提到的 viewport-fit 和 safe-area-inset 相關知識可訪問：CSS 在全屏iphonex（劉海屏）中的適配
scss：
//2021/01/25號前所有有劉海屏的iphone尺寸變量
// iphone x/xs/11 pro
$device-x: "screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)";
// iphone xr/11
$device-xr: "screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)";
// iphone x/xs/11pro max
$device-xmax: "screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)";
// iphone 12mini
$device-12mini: "screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3)";
// iphone 12/12pro
$device-12: "screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)";
// iphone 12pro max
$device-12promax: "screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3)";
/* 劉海屏適配*/
@media #{unquote($device-x)},
#{unquote($device-xr)},
#{unquote($device-xmax)},
#{unquote($device-12mini)},
#{unquote($device-12)},
#{unquote($device-12promax)} {
.page-content.ios {
padding-top: constant(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
padding-top: env(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
padding-bottom: constant(safe-area-inset-bottom); //為底下圓弧的高度 34px
padding-bottom: env(safe-area-inset-bottom); //為底下圓弧的高度 34px
.page-content-inner {
top: constant(safe-area-inset-top);
top: env(safe-area-inset-top);
}
}
}
參考文檔：