H5单页应用适配IOS留海屏和底部黑条
程序员文章站
2022-06-24 09:58:22
将以下代码复制添加至入口文件index.html中,可以解决IOS留海遮挡页面顶部的适配问题。...
解决方案
将以下代码复制添加至入口文件index.html中,可以解决IOS留海遮挡页面顶部的适配问题。
<!-- index.html -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<style>
#app {
/* 自定义预留顶部高度 */
--top: 20px;
/* 自定义预留底部高度 */
--bottom: 0px;
/* 适配留海,降级方案 */
padding-top: var(--top); /* 兼容非刘海屏 */
padding-top: calc(constant(safe-area-inset-bottom) + var(--top)); /* 标准留海屏 */
padding-top: calc(env(safe-area-inset-bottom) + var(--top)); /* 兼容 ios11 */
/* 适配底部黑条,降级方案 */
padding-bottom: var(--bottom);
padding-bottom: calc(constant(safe-area-inset-bottom) + var(--bottom));
padding-bottom: calc(env(safe-area-inset-bottom) + var(--bottom));
}
</style>
安全区域safe-area-inset-*
MDN是如此解释的:
最初由iOS浏览器提供,用于允许开发人员将其内容放置在视口的安全区域中,该规范中定义的safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。
总共有四个安全区域距离值:
- 上安全距离: safe-area-inset-top
- 右安全距离: safe-area-inset-right
- 下安全距离: safe-area-inset-bottom
- 左安全距离: safe-area-inset-left
本文地址:https://blog.csdn.net/sinat_36521655/article/details/111867928