| css

css鸡肋

安全区域适配(刘海屏/小黑条)

#viewport-fit

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

  • contain: 可视窗口完全包含网页内容（非安全）
  • cover：网页内容完全覆盖可视窗口（安全）
  • auto：默认值，跟 contain 表现一致
1
<meta name="viewport" content="width=device-width, viewport-fit=cover">

当不设置viewport-fit时,默认contain.要适配的话必须设置cover;小程序里的viewport-fit默认是cover。

#env()和constant

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

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

env() 兼容 iOS >= 11.2
constant() 兼容 ios < 11.2

当不设置viewport-fit = cover时,env属性无效

1
2
3
4
5
6
7
8
9
10
body {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

body{
	height: calc(60px(假设值) + constant(safe-area-inset-bottom));
	height: calc(60px(假设值) + env(safe-area-inset-bottom));
}

注意先写constant,顺序不能变

#@supports 兼容

小程序中有些机型（iphone SE 1代，IOS 10.3系统）不支持这俩属性，可用@supports(用法类似@media)判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
	div {
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}
}

page{
  padding-bottom: calc( constant(safe-area-inset-bottom) + 150rpx);
  padding-bottom: calc( env(safe-area-inset-bottom) + 150rpx);
}
/* not 表示不支持括号内的属性 */
@supports not(constant(safe-area-inset-bottom)){
  page{	/* 如果不支持保证padding属性生效 */
    padding-bottom: 150rpx;
  }
}

#vant-ui方案

设置viewport-fit后

1
2
3
4
5
6
7
<div id="app">
    <!-- 开启顶部安全区适配 -->
    <van-nav-bar safe-area-inset-top />

    <!-- 开启底部安全区适配 -->
    <van-number-keyboard safe-area-inset-bottom />
</div>

参考

移动端开发适配 iPhone 安全区域

ESC