CSS 在全屏iphonex（刘海屏）中的适配

快乐de馒头

于 2020-01-21 20:35:04 发布

阅读量5.3k

点赞数 3

分类专栏： css

本文链接：https://blog.csdn.net/chunxiaqiudong5/article/details/104065522

版权

本文介绍了如何对iPhone X的刘海屏进行适配，重点关注CSS的meta头设置，如contain、cover和auto，以及iOS11引入的CSS函数env()和constant()，用于处理安全区域距离。通过@supports和@media媒体查询实现兼容性代码，确保内容在刘海屏上正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iphonex 已经上线有一段时间了，作为业界刘海屏幕第一款机型，导致全屏不能正常的全屏显示了，，所以需要对
iphonx 适配，下面就详细说说如何适配

先看一张适配前后的图:

iphonex 提供的 meta 头

<meta name="viewport" content="viewport-fit=contain">
<meta name="viewport" content="viewport-fit=cover">
<meta name="viewport" content="viewport-fit=auto">

contain

可视化窗口完全包含网页内容

cover

网页内容完全覆盖

auto

默认值和 contain 一样

详细见下图(无耻盗图):

最低0.47元/天解锁文章