欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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-*

H5单页应用适配IOS留海屏和底部黑条

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