iPhone沒有完全重復背景圖片

Question

我建立了一個我認為沒有CSS錯誤的網站，直到我在iPhone上對其進行了測試。 我有一個奇怪的問題，就是重復的背景圖像無法完全延伸到整個頁面。

這是在iPhone和完整網站URL上的樣子： 示例網站

Answer 1

嘗試以下操作： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

如果您減小瀏覽器的寬度，問題也相同。 問題是背景IS拉伸，但是網站的寬度僅與拉伸后的背景圖像一樣。 徽標下方的滑動位具有固定的寬度，並且產生了一種幻覺，即背景拉伸得不夠遠。

上面的代碼應通過確保網站縮放以適合瀏覽器的寬度來解決此問題。

Answer 2

通過在HTML的頭部設置視口元標記來關閉自動縮放。 這樣可以設置頁面的寬度以匹配顯示的寬度，

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Answer 3

可悲的是，添加視口以將縮放比例設置為100％並不是我想要的。

進一步調試后，我發現問題是由頂部的大橫幅圖像引起的。 通過將其更改為居中的背景圖像並在容器中添加隱藏的溢出漏洞，該寬度比網站的其余部分要大。