Html iPad和iPhone上未正确显示背景图像

我遇到了一个奇怪的问题。我一直在用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上没有什么真正的改变。这张图像放大了很多

---

此外，完全消除

高度将导致背景图片的
高度仅为
5px
。有什么想法吗？
将高度从
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;
}

但是，您的背景图像仍然没有正确显示。我在想办法解决这个问题

更新：

为了使图像看起来“正常”，这是我得到的最接近的图像：

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

将高度从
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;
}

但是，您的背景图像仍然没有正确显示。我在想办法解决这个问题

更新：

为了使图像看起来“正常”，这是我得到的最接近的图像：

@media (max-width: 425px) {
    #home {
        background-size: 100% 14% !important; 
        zoom: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;
    }
} 

我找到了以下解决方案来解决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;
    }
} 

您能否提供更多信息，如哪个元素获得id
#home
，它是
主体
，
html
还是
部分
？现在我猜你的站点是一个单页的，而
#home
只是一个部分的ID。为你的项目放置链接。有问题的iOS设备是否使用iOS7？显然，iOS6中对vh的支持有问题：@MartinMetsalu-主页用于我主页正文中的一个部分。我用网站更新了。@Fernando-刚刚发布了一个到我网站的链接。你能提供更多信息吗，比如哪个元素获得id
#home
，它是
正文
，
html
还是
部分
？现在我猜你的站点是一个单页的，而
#home
只是一个部分的ID。为你的项目放置链接。有问题的iOS设备是否使用iOS7？显然，iOS6中对vh的支持有问题：@MartinMetsalu-主页用于我主页正文中的一个部分。我更新了网站。@Fernando-没有-刚刚发布了一个到我网站的链接。非常感谢Martin。我确实需要背景高度是设备高度的大小。请看一下我的更新，看看是否有帮助。马丁，ipad怎么样？它在那里也不起作用。为每个屏幕大小添加媒体查询并手动设置该设备的高度是否可行？我还尝试（没有成功）为ipad和iphone的确切屏幕尺寸创建媒体查询，并将100vh更改为100%。不过没用，非常感谢马丁。我确实需要背景高度是设备高度的大小。请看一下我的更新，看看是否有帮助。马丁，ipad怎么样？它在那里也不起作用。为每个屏幕大小添加媒体查询并手动设置该设备的高度是否可行？我还尝试（没有成功）为ipad和iphone的确切屏幕尺寸创建媒体查询，并将100vh更改为100%。但它不起作用，所以你的“背景图像在iPad和iPhone上没有正确显示”问题解决了？这是唯一对我有效的解决方案。将媒体查询添加到CSS样式表等。。。然后将元素ID更改为背景图像元素ID/类。还要将
.ipadfix
添加到同一元素中。保存文件，刷新页面，然后它就工作了。那个么你们关于“背景图像在iPad和iPhone上不能正确显示”的问题就解决了？这是唯一对我有效的解决方案。将媒体查询添加到CSS样式表等。。。然后将元素ID更改为背景图像元素ID/类。还要将
.ipadfix
添加到同一元素中。保存文件，刷新页面，然后工作。