iPhone端全屏背景图显示不全问题技术求助

这个问题我太熟了——iOS Safari对背景图的处理确实有不少坑，尤其是全屏背景的场景。你遇到的情况大概率是因为iOS的视口计算逻辑、对background-attachment: fixed的特殊处理导致的，下面给你一步步的解决方案：

1. 先修正核心背景样式 #

首先检查你的.full-page-img类，确保加上这些关键属性，替换或补充原有样式：

.full-page-img {
  background-size: cover;          /* 让背景图自适应填充容器 */
  background-position: center center; /* 始终居中显示图片 */
  background-repeat: no-repeat;
  background-attachment: scroll;  /* 重点：iOS对fixed支持极差，换成scroll */
}

解释：iOS Safari会把background-attachment: fixed的背景图尺寸计算基于整个文档（而不是当前视口），导致只显示图片的一小部分。如果需要视差效果，后续可以用JS实现，别依赖CSS的fixed属性。

2. 确保全屏高度的层级正确性 #

全屏背景的前提是所有父元素的高度都正确传递，给html和body加上基础样式：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 避免横向滚动干扰 */
}

同时确认你的h-100类确实设置了height: 100%，没有被其他样式覆盖。

3. iOS专属视口高度修复 #

iOS的状态栏会影响100%高度的计算，加上这个媒体查询做兜底：

@supports (-webkit-touch-callout: none) {
  /* 仅对iOS设备生效 */
  #main.full-page-img {
    min-height: -webkit-fill-available;
  }
}

这个属性会让容器高度自动适配iOS的实际可用视口（排除状态栏、底部操作栏的高度）。

4. 图片本身的小建议 #

确保你的desc-with-flowers-100-m.jpg是宽屏比例（比如16:9或更宽），这样background-size: cover模式下能更好地填充移动端视口，避免过多裁剪。

最终修改后的样式示例 #

把这些整合起来，你的样式应该类似这样：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.parallax-100-percents {
  /* 保留你原有的其他样式 */
}

.full-page-img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  height: 100%;
}

/* iOS专属适配 */
@supports (-webkit-touch-callout: none) {
  #main.full-page-img {
    min-height: -webkit-fill-available;
  }
}

按照这个调整后，iPhone上的全屏背景图应该就能正常显示了。

内容的提问来源于stack exchange，提问作者HAYMbl4