前端适配IOS、Android刘海屏

设置网页在可视窗口的布局方式

设置 viweport-fit 属性，使得页面内容完全覆盖整个窗口，设置后可以使用env函数

1
<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>

安全区

将页面内容限制在安全区域内。

1
body{
2
    display: block;
3
    padding: 20px;
4
    padding: 
5
        env(safe-area-inset-top)
6
        env(safe-area-inset-right)
7
        env(safe-area-inset-bottom)
8
        env(safe-area-inset-left);
9
}

Fixed

当有时我们将header和footer设置为position: fixed,高度基于视口，所以还是会出现遮挡问题。

1.通过加内边距 padding 扩展高度

1
{
2
	padding-bottom: env(safe-area-inset-bottom);
3
}

2.通过计算函数 calc 覆盖原来高度

1
{
2
	height: calc(60px + env(safe-area-inset-bottom));
3
}
移动端
CSS 适配 刘海屏

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！