iOS背景精靈不顯示

我手上有一個棘手的小錯誤。iOS背景精靈不顯示

考慮this page。 images that accompany the paragraphs都是從精靈中調用的，並且隨着視口縮小，調用不同的背景位置以適應響應式設計中的各種佈局。

在瀏覽器測試中，除了IE < 9和iOS（accompanying inspector view）之外，所有視圖/設備都不會爲所有設備/瀏覽器提供嚴重的錯誤。這似乎是iOS 設備（相同的視圖/寬度在桌面上正確顯示）出於某種原因，不顯示任何東西在這些div。 Inspector不會拋出錯誤，網絡計時器顯示精靈確實加載了。

爲了加厚繪圖，我可以在iOS Safari中加載精靈，如果我調用直接URL。在所有圖像資產上，Perms設置爲755，我嘗試過使用各種dom元素（div，span，p，i）和背景技術（即<div>中包含 ，聲明content: '';，相反content: ' ';）。

我已經在Mac/Win Chrome/Firefox/Safari，Android設備，iPhone4/5和iPad（iOS6）上對此進行了測試。不顯示（至少在我的硬件上）背景div的設備是iPhone和iPad。

任何人都有這方面的見解？

來源

2013-02-25 joshdcomp

有一個在移動Safari瀏覽器，與總的分辨率大於200萬個像素不顯示在所有使它如此CSS背景圖像的錯誤。 A blog post from 2010深入探討了這一點。據我所知，它從未糾正過。要顯示背景圖像，您需要將其縮小（以總像素計）或將其分成兩個或更多個子畫面。我以前肯定看到過這種情況。唯一的解決辦法是讓圖像變小。不是以像素爲單位的文件大小。

來源

2013-02-26 01:57:09

這是一個有趣的小錯誤。我知道我有一個巨大的精靈，但我不知道這會讓iOS變得遲鈍。 – joshdcomp 2013-02-26 05:31:13

可愛的網站。

問題是，你的小沙發是一個奇怪的巨大精靈。雖然它只有300kb以上（仍然非常大），但它可能是意味着它無法處理的尺寸 - 雖然我以前從未見過，所以我可能會誤解。

我喜歡嘗試用精靈來服務事物的想法，這意味着只有一個http請求，但在這種情況下，只有在移動設備上查看時纔會調用精靈的底部。可能需要將其分解爲桌面精靈和移動精靈，然後使用適當的媒體查詢加載它們。

原因

來源

2013-02-25 07:23:14 justinavery

我以爲iOS可能會在精靈本身窒息，但如果我直接在瀏覽器中調用它，我可以加載圖像。您是否認爲將移動圖像移動到精靈頂部可以解決任何問題，還是僅僅是造成問題的圖像的絕對質量？ – joshdcomp 2013-02-25 16:06:31

我認爲你最好把它分裂出來，說實話，即使在文件的頂部，它仍然不能作爲背景渲染。 – justinavery 2013-02-26 12:44:26

是的，我最終將精靈移動到桌面和移動。無論如何，這種方式更有意義，因爲這種方式需要移動設備以更少的資源投入。 – joshdcomp 2013-02-28 17:21:59

這個限制在不同情況下似乎有所不同。我正在使用iOS 5.1.1, 對iPhone 4設備進行測試，並且文件本身的限制似乎不如的背景大小。如果我使用背景1100px X 1000px，它將不起作用。但是，如果我將背景大小設置爲1000px X 1000px，它將起作用。

因此，如果我使用高DPI（2x）版本，2000px X 2000px並將圖像大小設置爲1000px X 1000px，它仍然可以工作，即使背景本身較大。

因此，建議您使用1000px X 1000px作爲默認精靈，，然後您至少可以擁有一個2xDPI。還沒有嘗試過3x。

來源

2014-03-18 09:12:07 Jompis

iOS背景精靈不顯示

回答

相關問題