html - 移动设备的背景图片不居中

Question

出于某种原因，从我的手机查看时我的背景图像没有保持居中，但是当使用 Chrome 开发工具中的切换设备工具栏从我的桌面浏览器查看移动屏幕尺寸时，它保持居中。

body { padding: 0; margin: 0; }
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: 100vw;
    height: 100vh;

    background: url("https://cdn.shopify.com/s/files/1/0099/7795/4368/files/banner-stripped.png?v=1633873595") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

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

<div id="banner-wrap">
  <div id="banner">
    <h1 id='banner-title'><span>Lorem Ipsum</span><span>dolor sit amet</span></h1>
  </div>
</div>

标签： htmlcss