移动端背景图片拉伸/不显示求助：桌面正常，iPhone 6S异常

嘿，这种移动端适配的坑我也踩过——桌面端好好的，一到老款iPhone就出状况，咱们一步步来排查解决：

1. 先检查视口设置（最容易忽略的关键） #

首先确认页面的viewport meta标签是否正确，老iOS设备对这个敏感度很高，错误的视口会导致页面缩放异常，间接让背景图拉伸变形：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这个标签能确保页面以设备宽度为基准加载，不会被默认缩放打乱布局。

2. 调整背景图的CSS属性（核心修复点） #

iPhone 6S是2倍Retina屏，加上老iOS对部分CSS属性的解析差异，建议调整以下属性：

/* 假设你的背景容器类是 .about-bg */
.about-bg {
  background-image: url('你的背景图路径');
  /* 用cover保证覆盖容器，结合居中避免过度拉伸 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* 给老iOS加webkit前缀做兼容 */
  -webkit-background-size: cover;
  -webkit-background-position: center center;
  /* 确保容器有明确尺寸，比如占满视口 */
  width: 100%;
  min-height: 100vh;
}

• 如果cover还是导致拉伸模糊，可以试试background-size: contain（保证图片完整显示，但可能留空白），或者background-size: 100% auto（宽度适配，高度自动），根据你的需求选择。
• 别用background-attachment: fixed，老iOS对这个属性的支持有bug，会导致背景图错位或直接不显示。

3. 确保图片分辨率足够（解决模糊的根本） #

iPhone 6S的屏幕宽度是375px（逻辑像素），对应的物理像素是750px，所以你的背景图宽度至少要750px（2倍图）；如果是全屏背景，建议做1500px宽的图（适配更大的Retina屏），这样在Retina屏上不会因为强行拉伸而模糊。

另外，建议用多倍图适配不同分辨率，比如用image-set提供不同版本：

.about-bg {
  background-image: url('bg@1x.jpg'); /* 低分辨率 fallback */
  background-image: image-set(
    url('bg@1x.jpg') 1x,
    url('bg@2x.jpg') 2x,
    url('bg@3x.jpg') 3x
  );
  /* 其他背景属性 */
}

4. 排查图片格式与加载问题（解决不显示的情况） #

• 老iOS（比如iPhone 6S的系统版本可能偏低）不支持WebP格式，如果你的背景图用了WebP，一定要提供JPG/PNG的备用图。
• 检查图片路径是否正确，虽然桌面正常，但移动端可能因为相对路径或缓存问题加载失败，可以强制刷新移动端缓存试试。

5. 排除其他CSS干扰 #

H1和p标签一般不会直接影响背景图，但可以检查父容器的CSS：

• 是否设置了overflow: hidden导致背景图被裁剪？
• 容器的宽高是否被其他元素的margin/padding挤压？可以用Chrome的Device Toolbar模拟iPhone 6S，查看容器的实际尺寸。

按上面的步骤排查，应该能解决你的问题～

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