如何适配处理iphoneX/ios系统底部的横条

文章2023-01-107 人已阅来源:网络

iphoneX手机取消了实体Home键,取而代之的是主界面底部不显眼的横条“Home Indicator”。当网页底部fixed 元素时候,一部分元素可能就被这个横条遮挡住,怎么适配解决呢?

第一步:

<meta name="viewport" content="width=device-width, viewport-fit=cover">

第二步:

页面主体内容限定在安全区域内,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况

body { padding-bottom: env(safe-area-inset-bottom); }

第三步:

fixed 元素的适配

第一种:padding-bottom: env(safe-area-inset-bottom);

注意元素是否设置box-sizing:border-box;否则不起作用,道理就不说了。

第二种:height: calc(60px(假设值) + env(safe-area-inset-bottom));

第三种:margin-bottom: env(safe-area-inset-bottom);

这三种方式都可解决,视情况而定选择合适的,也可以灵活为fixed 元素的子元素添加这些属性

使用 @supports

一般只希望 iPhoneX 才需要新增适配样式,可以配合 @supports 编写样式:

@supports (bottom: env(safe-area-inset-bottom)) {

div {

margin-bottom: env(safe-area-inset-bottom);

}

}

下面是一些拓展知识点:

1.iphoneX业界刘海屏幕第一款机型,导致全屏不能正常的全屏显示了,所以需要对iphonx 适配

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

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

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

viewport-fit:

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

cover: 网页内容完全覆盖

auto: 默认值和 contain 一样

2.ios11 增加新特性,webkit 的 css 函数

四个预定义变量为设定安全区域和边界的距离,如下:

safe-area-inset-left:安全区域距离左边边界距离

safe-area-inset-right:安全区域距离右边边界距离

safe-area-inset-top:安全区域距离顶部边界距离;在刘海全屏的时候 top 为 44px

safe-area-inset-bottom:安全区域距离底部边界距离;刘海全屏的条件下是 34px

css 函数 env() 和 constant()

上面两个函数可以直接使用变量函数,只有在 webkit 内核下才支持

env() 必须在 ios >= 11.2 才支持

constant() 必须 ios < 11.2 支持

env 和 constant 只有在 viewport-fit=cover 时候才能生效

兼容前后版本,例子:

padding-top: constant(safe-area-inset-top);

padding-top: env(safe-area-inset-top);