html - 完美的整页背景图像不适用于移动设备

Question

完美的整页背景图片在移动设备上无法正常工作...

你能帮我调整下面的 CSS/HTML 代码吗？

在 Chrome 中预览:

在 iPhone 7Plus 上直播:

注意到背景图像是如何倾斜、扭曲和模糊的吗？为什么它看起来像实时的，但在预览模式下却不是？

我在文档中也有这个元代码:

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS:

.MSL-Splash-Section {
    display: block;
    padding: 10px 0px 20px 0px;
    text-align: center;
    background: #FFF url(https://sephora.csod.com/clientimg/sephora/welcome/Animation_Backdrop.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    border: 1px #00000033 solid;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.MSL-Splash-Content {
    padding: 20px 0px 40px 0px;
}

HTML:

<div class="MSL-Splash-Section">
    <div class="MSL-Splash-Content">

        <!-- STUFF -->

    </div>
</div>

Answer 1

尝试像这样在您的 css 类中添加 100vh:

.MSL-Splash-Section {
    display: block;
    padding: 10px 0px 20px 0px;
    text-align: center;
    background: #FFF url(https://sephora.csod.com/clientimg/sephora/welcome/Animation_Backdrop.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    border: 1px #00000033 solid;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    height:100vh;//Add 100vh
}