CSS兼容iPhone底部小横条

最新推荐文章于 2026-04-17 02:10:24 发布

原创最新推荐文章于 2026-04-17 02:10:24 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #javascript #前端

Html 同时被 2 个专栏收录

9 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

文章介绍了如何使用viewport-fit=cover和CSS函数env()、constant()来实现H5网页在iOS设备上的安全区域适配，确保内容不会被刘海屏或其他屏幕边缘遮挡。通过设置margin和padding，可以保证页面元素在不同iOS版本下显示完整。

1.H5网页设置viewport-fit=cover

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

2.使用苹果官方推出的css函数env()、constant()来适配。
env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

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

而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover

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

/* 示例 */
.bottom-group{
    clear:both;float:left;width: 100%;
    border-top:1px solid #fafafa;
    background-color:#ffffff;overflow: hidden;position: fixed;left:0;bottom:0;right:0;z-index: 1;
    height:54px;
    /* 兼容 IOS<11.2 */
    height: calc(54px+ constant(safe-area-inset-bottom));
    /*兼容 IOS>11.2*/
    height: calc(54px + env(safe-area-inset-bottom));
    /*
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

注意 constant与env顺序不能改变，先constant再env