2016-02-04 73 views
1

我創建了一個視差頁面。 在我的桌面上一切都很好,但如果我在移動設備上查看它,那麼圖像就會被炸燬,我可以從字面上計算像素。背景圖像在手機上爆炸

我不知道是什麼原因造成的。 即使如此,我不知道如何解決這個問題....

我甚至不知道除了Google以外從哪裏開始。 我發現一個主題,有人說這是一個Safari問題。

有人嗎?

我無法真正創建JSFiddle或其他東西,因爲像你說的那樣,它是在WordPress中製作的。

但是,請參閱附件圖像。也許有人至少可以看到問題所在,也許會告訴我是什麼原因導致(全球指示)
桌面:
Desktop version

手機(iPhone)
iPhone

+0

您需要向我們展示一些代碼。 – JamieC

+0

你累了什麼?你的代碼在哪裏?你能否提供演示證明這個問題? – hungerstar

+0

你已經發布了一堆來自WordPress的PHP,我不打算建立一個WordPress的服務器來嘗試複製這個問題。你需要把一個最小的測試用例放在一起,然後發佈到jbin,jsfiddle pr類似。 – JamieC

回答

2

你可能想嘗試換background-size:coverbackground-size:contain。這將確保背景圖像適合窗口內的寬度和高度,但可以創建一些空白區域。有了'封面',整個區域都會保證被填滿,但是圖像可能並不完全被包含,這似乎是現在正在發生的事情。

+0

這正是發生的事情。我現在遇到的問題就像你說的那樣,有很多白色空間。但現在我知道從哪裏開始尋找。謝謝! – Interactive

+0

背景是否可能在視口後面?這意味着圖像不會縮放... – Interactive

0

你有沒有嘗試添加:

<meta name="viewport" content="initial-scale=1.0"> 

到HTML的頭上? 或者,如果這還不夠,嘗試:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

它告訴移動瀏覽器使用設備的寬度和使用全初始縮放級別。

+0

目前設置爲'' – Interactive