# webapp1

**Repository Path**: tongguan123/webapp1

## Basic Information

- **Project Name**: webapp1
- **Description**: 移动web开发第一个项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-26
- **Last Updated**: 2025-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



tabbar底部留白与黑线遮挡问题

页面默认填宽的是安全区域的高度，并不包括刘海区

如何让页面高度填充到刘海区域

在viewprot中添加viewport-fit=cover

```
<meta 
        name="viewport" 
        content="width=device-width,viewport-fit=cover initial-scale=1.0"
>
```

高度填充到刘海区域，tabbar的内容就会被底下的黑线遮挡一小部分。

如何解决底部被黑线遮挡问题

我们只需要给tabbar加下如下代码

方法一：

添加以下代码的元素，不能是怪异盒子模型，否则元素自身高度会减少

```
/* 兼容 IOS<11.2*/
padding-bottom: constant(safe-area-inset-bottom);
/* 兼容 IOS>11.2*/
padding-bottom: env(safe-area-inset-bottom);
```

方法二：

100px是tabbar原来的高度

```
/* 兼容IOS<11.2*/
height: calc(50px + constant(safe-area-inset-bottom))
/* 兼容IOS>11.2*/
height: calc(50px + env(safe-area-inset-bottom))
```

在实际开发中，我们一般是先用constant,再env

针对其他机型，不支持上面两种写法的，可以选择用CSS的@supports

```
@supports not ( constant(safe-area-inset-bottom)){
	.tabbar{
		padding-bottom: 20px;
	}
}
```