通过媒体查询适配所有 ios 刘海屏

废话不多说,直接上干货。本文主要解决如何通过媒体查询适配所有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-fitsafe-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更新)

posted @   前端[色色]  阅读(1116)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
历史上的今天:
2019-01-25 微信小程序——动态设置swiper的高度
2018-01-25 js学习笔记33----DOM操作
点击右上角即可分享
微信分享提示