移动端页面背景图无法居中，Chrome Dev Tools模拟移动端显示正常

问题原因 #

该问题由两个移动端特有的兼容性问题导致：

• background-attachment: fixed 在移动端Webkit内核浏览器中存在定位偏移bug，浏览器会将固定背景相对于整个文档而非视口定位，导致背景居中失效
• 未配置正确的viewport元标签、或使用100vh计算高度时，移动端浏览器会将地址栏、工具栏高度计入视口，出现尺寸计算偏差，也会导致背景位置错位

修复方案 #

步骤1：添加viewport元标签 #

在HTML的<head>标签内添加如下代码，确保移动端视口计算正确：

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

步骤2：修改CSS代码 #

放弃使用background-attachment: fixed实现固定背景，改用固定定位的伪元素实现相同效果，同时修复视口高度计算问题，修改后的完整CSS如下：

html, body { 
  padding: 0; 
  margin: 0; 
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
h1 { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  font-family: "PPWoodland-Bold";
  color: #18454A;
  animation: drop 1s linear; 
  padding: 1rem 0 0;
  margin: 0;
}
#banner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
#banner::before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("https://cdn.shopify.com/s/files/1/0099/7795/4368/files/banner-stripped.png?v=1633873595") no-repeat center center;
    background-size: cover;
    z-index: -1;
}

@media (max-width: 749px) {
    #banner h1 { font-size: 32px; }
}

步骤3：保留原有HTML结构 #

原有HTML代码无需修改，直接沿用即可。

修复逻辑说明 #

• 用position: fixed的伪元素承载背景，避免了background-attachment: fixed的移动端兼容性问题，同时能实现背景固定不随滚动偏移的效果
• 给html、body设置100%宽高后让#banner继承，替代原有的100vw、100vh，避免移动端视口尺寸计算偏差
• viewport标签是移动端适配的基础配置，能保证移动端浏览器以设备实际宽度渲染页面，不会出现默认缩放导致的布局错位

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