背景圖像在iPad和iPhone上顯示不正確

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%失去滾動的bug：

#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; 
} 

但那麼你的背景圖像仍然不能正確顯示。我正在尋找解決方法。

UPDATE：

這是我爲了讓圖像看起來「正常」得到的最接近：

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