部署上线的个人作品集网站固定背景图在移动端显示异常求助

核心问题原因 #

• 同个DOM节点同时应用bg-img和wrapper两个类，两者都定义了背景图相关样式，存在属性冲突
• 移动端浏览器对background-attachment: fixed的兼容性差，受移动端动态视口（地址栏自动隐藏/显示改变视口高度）影响，会出现背景拉伸、跟随滚动的异常
• 固定写死的min-height: 720px在小屏手机上高度超出视口，background-size: cover会按容器高度等比放大背景图，导致显示不全
• 若未设置viewport元标签，移动端会默认按PC端视口宽度渲染页面，也会导致背景图放大异常

解决方案 #

1. 先在HTML头部添加viewport元标签（如果之前没加的话）

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

2. 合并冗余的背景样式，删除重复的背景定义，改用伪元素实现固定背景，规避移动端兼容问题
   修改后的CSS如下：

/* 删掉原来的.bg-img和wrapper的背景相关定义，替换为以下内容 */
.bg-wrapper {
    position: relative;
    min-height: 100vh; /* 替换原来的720px，自适应视口高度 */
    border-bottom: 2px solid black;
    overflow: hidden;
}
/* 用伪元素做固定背景 */
.bg-wrapper::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url('images/colors4.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* 其他原有样式保留，新增移动端适配的媒体查询 */
@media (max-width: 768px) {
    .col-sm-6 {
        padding-left: 20px;
        padding-right: 20px;
    }
    .page-introduction {
        margin-top: 30px;
    }
}

3. 修改HTML中的容器类，把原来的bg-img wrapper img-fluid改成bg-wrapper img-fluid即可

<div class="bg-wrapper img-fluid">
<!-- 原有内部内容不变 -->
</div>

修改后部署请先清理浏览器缓存再测试，避免旧样式缓存影响验证结果。

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