uni-app iponeX 使用 viewport-fit=cover 全屏后 底部留白

uni-app iponeX 使用 viewport-fit=cover 全屏后 底部留白

示例代码：

mui.init({
swipeBack:false,
subpages:[{url:'a01.html',id:'a01.html',styles:{top:"0px",bottom:"0px"}}]
});

操作步骤：

没啥复现，初始化就这样

预期结果：

满屏

实际结果：

底部留白

bug描述：

如果是新打开页面的话，是满屏的； 如果使用预加载子页面的话，使用<meta name="viewport" content="... viewport-fit=cover">底部会留出一大截白色的； 如果不使用这段代码，上下各有留白；


更多关于uni-app iponeX 使用 viewport-fit=cover 全屏后 底部留白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

请问一下，这个问题解决了吗？

更多关于uni-app iponeX 使用 viewport-fit=cover 全屏后 底部留白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


针对iPhone X等全面屏设备底部留白问题，这通常是由于安全区域（Safe Area）适配导致的。viewport-fit=cover确实可以让页面覆盖整个屏幕，但底部安全区域（如Home Indicator）仍会被预留空间。

解决方案：

  1. CSS环境变量适配（推荐）： 在CSS中使用constant()和env()函数处理安全区域：

    .page {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
}

  2. manifest.json配置： 在manifest.json的app-plus节点下配置：

    "safearea": {
  "bottom": {
    "offset": "none"
  }
}

  3. 页面样式调整： 确保页面容器高度为100%：

    page, .container {
  height: 100vh;
  min-height: 100%;
}
回到顶部