針對iPhone響應式設計問題的CSS解決方案問題

Question

我爲社交俱樂部創建了一個新頁面，並且存在一些問題。這是一個具有單頁設計的響應式網站。在介紹部分，只有帶有簡單徽標的背景圖片。

現在一切看起來不錯在android和大多數pc瀏覽器，但不知何故iphone瀏覽器顯示放大的背景圖像。

有人知道解決方法嗎？

你可以嘗試一下自己在http://juku-tbg.de/

Chrome的截圖： - > OK

iPhone模式在Chrome： - 從機器人> OK

截圖設備： - >確定

截圖在iPhone 5S： - > NOK

非常感謝。

Answer 1

background-attachment: fixed在移動Safari中發生了錯誤。對於修補程序，請使用單獨的容器，並將其應用於position: fixed。

#bg { 
    background-image: url('path/to/img.jpg'); 
    background-attachment: scroll; 
    background-position: center top; 
    background-repeat: no-repeat; 
    display: block; 
    width: 100%; 
    min-height: 100%; 
    z-index: -100; 
    position: fixed; 
    top: 0; 
    left: 0; 
}