iphoneX等移动端设备底部安全区域适配-简述

最新推荐文章于 2024-08-16 11:09:38 发布

皮蛋灬

最新推荐文章于 2024-08-16 11:09:38 发布

阅读量6.3k

点赞数 3

文章标签： css html5 vue

本文链接：https://blog.csdn.net/vscode_js/article/details/118294332

版权

前言

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

请看下面的示例：

以上就是我们要解决的问题，

其实解决起来还是很简单的，先说一下解决方案，然后再阐述一下为什么要这样做:

第一步：在我们的index.html页面的meta标签 viewport添加一个属性viewport-fit=cover，请看的代码（我是用vue开发的移动端网页）

这一步必不可少，否则接下来的添加也是不生效的，注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />

第二步：在我们的css样式里面需要添加的元素上面添加padding属性并赋值为env() 和 constant()

请看代码示例：

.skuBox{
    padding-bottom:constant(safe-area-inset-bottom);
    padding-bottom:env(safe-area-inset-bottom);
}

综上所述，ihoneX底部安全适配基本上就解决了，接下来说一下为什么要这样做：

为什么要做适配：（还不是为了不让设计师和丧心产品汪找我们的麻烦。。。）

安全区域

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

更详细说明，参考文档：Human Interface Guidelines - iPhoneX

viewport-fit

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

contain: 可视窗口完全包含网页内容（左图）
cover：网页内容完全覆盖可视窗口（右图）
auto：默认值，跟 contain 表现一致

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

更详细说明，参考文档：viewport-fit-descriptor

下面简单介绍下env()和constant():

env() 和 constant()

其实要想要适配的属性有很多，但是我只接收到设计汪给我提出的iphoneX底部适配吗。。。

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

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

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

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

这就意味着，之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容，如下示例：

      // 兼容写法
      padding-bottom:constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
      padding-bottom:env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

注意：env() 跟 constant() 需要同时存在，而且顺序不能换。

更详细说明，参考文档：Designing Websites for iPhone X

同理我们也可以使用占位元素来适配iphoneX底部安全区域，类似vant-ui给出的方案，

下面给出一个样式仅供参考

.fixedBox{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background-color: #fff;
}

总体上适配就完成了，请看适配后的图片展示：

下面的是安卓的示例：