通过媒体查询适配所有 ios 刘海屏
废话不多说，直接上干货。本文主要解决如何通过媒体查询适配所有iphone刘海屏。
html:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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); } } }
参考文档：
iPhone所有手机型号屏幕尺寸(2020-11-11更新)