移动端背景图在真实设备显示异常，与桌面端调试效果不一致

桌面端开发者工具模拟移动端时使用的是PC端浏览器内核的适配逻辑，和真实移动设备的浏览器内核（尤其是iOS端全系浏览器均基于Webkit内核）存在差异，因此会出现模拟显示正常、真机显示异常的情况，可按以下步骤修复：

• 第一步：补全视口配置
  首先检查页面<head>区域是否添加了正确的移动端视口元标签，开发者工具模拟时会自动注入该配置，真机缺失该标签会导致页面视口宽度异常，背景图被拉伸。添加代码如下：

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

• 第二步：修复背景属性兼容性问题
  移动端Webkit内核对background-attachment: fixed和background-size: cover的组合支持存在bug，会导致背景图被拉伸到整个文档高度而非当前视口高度，出现尺寸过大的问题。可将#hero的CSS调整为如下写法，拆分背景属性，移动端单独处理固定逻辑：

#hero {
  width: 100%;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  /* 拆分背景属性避免简写兼容性问题 */
  background-image: url("../img/mobilebg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  -webkit-animation:linear infinite alternate;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
  z-index: 3;
}

/* 768px以下移动端设备单独适配 */
@media (max-width: 768px) {
  #hero {
    background-attachment: scroll;
  }
}

如果修改后仍有显示问题，可以改用伪元素实现固定背景效果，完全规避兼容性问题：

#hero {
  width: 100%;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  -webkit-animation:linear infinite alternate;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
  z-index: 3;
}

#hero::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url("../img/mobilebg.png") no-repeat center center;
  background-size: cover;
  z-index: -1;
}

• 第三步：校验背景图资源
  确认你使用的mobilebg.png本身宽高比适配移动端视口，避免原图尺寸过大导致的裁切异常。

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