uniapp 苹果手机图片全屏底部不留白如何解决

在uniapp开发中，苹果手机图片全屏显示时底部会留白，请问如何解决这个问题？希望图片能真正全屏显示，不出现底部空白区域。

2 回复

在pages.json中设置对应页面的style，添加"app-plus": { "safearea": { "bottom": { "offset": "none" } } }。同时检查图片样式，确保height: 100vh或height: 100%，并设置object-fit: cover。


在 UniApp 中，苹果手机图片全屏显示时底部出现留白，通常是由于安全区域（Safe Area）或图片尺寸适配问题导致。以下是解决方案：

1. 禁用安全区域适配

在 pages.json 中为对应页面配置 safeArea：

{
  "path": "pages/your-page",
  "style": {
    "safeArea": {
      "bottom": { "offset": "none" } // 禁用底部安全区域
    }
  }
}

2. CSS 适配全屏

在页面的 <style> 中添加以下样式：

/* 确保页面容器全屏 */
page {
  height: 100vh;
  overflow: hidden;
}

/* 图片样式 */
.fullscreen-image {
  width: 100%;
  height: 100vh;
  object-fit: cover; /* 保持图片比例并填满容器 */
}

3. 动态计算高度（可选）

如果仍有问题，可通过 JS 动态设置高度：

<template>
  <view>
    <image :style="imageStyle" src="/path/to/image"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageStyle: {
        width: '100%',
        height: '100vh'
      }
    };
  },
  onLoad() {
    // 适配 iOS 底部安全区域
    const systemInfo = uni.getSystemInfoSync();
    this.imageStyle.height = `${systemInfo.windowHeight}px`;
  }
};
</script>

4. 检查图片比例

确保图片比例与屏幕比例接近，避免因拉伸产生空白。

注意事项：

  • 测试时使用真机，模拟器可能无法完全复现安全区域问题。
  • 若需要保留底部操作（如导航栏），可通过 safeArea 精确调整偏移量。

按以上步骤操作，即可解决苹果手机图片全屏底部留白问题。

回到顶部