CSS 适配 iPhoneX 全面屏

最新推荐文章于 2024-03-22 10:09:36 发布

置顶

dlf_0610

最新推荐文章于 2024-03-22 10:09:36 发布

阅读量2.8k

点赞数 4

分类专栏： css适配iPhone 文章标签： html5 css

本文链接：https://blog.csdn.net/dlf_0610/article/details/106627143

版权

CSS 网页适配 iPhoneX，就是这么简单

iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。

我通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图：
在这里插入图片描述

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：
在这里插入图片描述

这也就是说，如果我们想要做好适配，就必须保证页面的可视和可操作区域是在安全区域内的。

如果对此想要有更详细的了解的话，可以参考一下：
Human Interface Guidelines - iPhoneX

iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

在这里插入图片描述

**注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。**

对此有更详细的说明，可参考:viewport-fit-descriptor

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）

**注意：当 viewport-fit=contain 时 env() 是不起作用的，
必须要配合 viewport-fit=cover 使用。
对于不支持env() 的浏览器，浏览器将会忽略它。**

在这之前，我使用的是 constant()，后来，官方

关注