Question

我遇到了一个奇怪的问题。我使用bootstrap3构建了这个网站，一切似乎都运行正常，直到我在iPad或iPhone上试用。我的背景图像似乎是错误的。它被拉得太大了，你必须滚动10次，直到你到达第一个内容。

这是我发现问题的网站：www.socialook.net

以下是包含问题的部分的CSS：

#home {
background: url(img/background.png) no-repeat center center fixed; 
height: 100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#e6e6e6;
text-align: center;}

更新：我更改了height:100%而不是height:100vh，并且在ipad或iphone中没有任何改变。图像非常放大。

此外，完全取消height会导致背景图片的height仅约为5px。有什么想法吗？

Answer 1

我找到了以下解决方案来解决ipad和iphone问题：

    /* fix for the ipad */
@media (min-device-width : 768px) and (max-device-width : 1024px)  { 
    #home {
        background-attachment: scroll;
        /* default height landscape*/
        height: 768px;
    }

    .ipadfix{
        height: 300px !important;
    }
    img.ipadfix{
        width:100% !important; 
        height:auto !important;
    }
}
/* fix for the ipad */
@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait) {
    #home {
        /* default height landscape*/
        height: 1024px;
    }
} 

/* fix for the iphone */
@media (min-device-width : 320px) and (max-device-width : 568px)  { 
    #home {
        background-attachment: scroll;
        /* default height landscape*/
        height: 320px;
    }

    .ipadfix{
        height: 150px !important;
    }
    img.ipadfix{
        width:100% !important; 
        height:auto !important;
    }
}
/* fix for the iphone */
@media (min-device-width : 320px) and (max-device-width : 568px) and (orientation: portrait) {
    #home {
        /* default height landscape*/
        height: 568px;
    }
}

Answer 2

将高度从100vh更改为100%会丢失滚动错误：

#home {
    background: url(img/background.png) no-repeat center center fixed; 
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#e6e6e6;
    text-align: center;
}

但是您的背景图像仍然无法正确显示。我正在寻找解决方法。

更新：

这是我最接近的图片，以使图片看起来很正常＆＃39;：

@media (max-width: 425px) {
    #home {
        background-size: 100% 14% !important; 
        zoom:1;
        } 
}

背景图像在iPad和iPhone上无法正常显示

2 个答案: