CSS背景圖像在iPhone上呈現不同

Question

我們的頁面設計在我嘗試過的每個PC瀏覽器中都很有效，但在使用iPhone或iPod Touch查看時卻很奇怪。

問題與中心背景圖像有很大關系：

#content_container
{

background-image:url('content-background.jpg');
background-position:top center;
background-repeat:no-repeat;
width:1020px;
height:auto;
}

content-background.jpg圖像非常高（3000像素），並且由於內容的原因而被設計為“透露”它正在增長的DIV。

你必須看一下頁面和完整的CSS來理解，所以我已經從設計中剝離了所有其他東西，並用這個例子重新產生了問題：

http://files.codeulike.com/static/cssexample/example.htm
（例子由1個html文件，1個css文件和3個圖像組成）

你會看到在IE8，Firefox，Chrome中你會得到一個漂亮的綠色框。 但是在iOS瀏覽器中，長薄的背景圖像會被重新縮放，一切都變得奇怪。

（我正在使用iPod Touch第二代，但我認為在其他iPhone / iPod touch中會出現同樣的問題）。

任何幫助非常感謝！

Answer 1

弄清楚：iPhone對Jpegs有百萬像素的限制，之后它縮小了Jpeg。

在defusion.org.uk上有關於此的非常好的博客文章： http ： //www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari /

Jpegs縮小之后的限制似乎是大約2百萬像素。 它是一個記錄的iOS資源限制，在此處描述：

Apple - 創建兼容的Web內容 - 了解iOS資源限制

使用子采樣，JPEG的最大解碼圖像尺寸為3200萬像素。

由於子采樣，JPEG圖像可以達到3200萬像素，這使得JPEG圖像可以解碼為像素數量的十六分之一。 大於2百萬像素的JPEG圖像被二次采樣 - 即，解碼為縮小的尺寸。 JPEG子采樣允許用戶查看來自最新數碼相機的圖像。

..我認為正常顯示2百萬像素以下的Jpegs，通過二次采樣（收縮）顯示2到32百萬像素之間的Jpegs，並且可能根本無法顯示超過32百萬像素的Jpegs。

更改我的網站以使用低於2百萬像素的背景圖像解決了這個問題。

Answer 2

當我寫這篇文章時，我意識到這篇文章已有兩年了，但我嘗試了一些有用的東西，也許不是最好的方法，但它解決了我的問題。

第一步是將我的背景圖像保存為完全解決問題的.png ...除了是一個1200px x 12000px的背景圖像，.png文件是一個怪物。

所以，我在Photoshop中打開了.png文件並將其保存為優化的網頁和設備作為.jpg並上傳該文件，它就像iPhone上的魅力和所有五大瀏覽器一樣。

希望有所幫助！

Answer 3

不太正確，我有一個背景1640x1200（sub 2Mpix），背景縮小......：S

Answer 4

如果你保留了

background-attachment: fixed;

在桌面CSS文件中，然后記住它將其更改為

background-attachment: scroll;

在移動CSS文件中。 如果沒有這樣做，它將顯示意想不到的效果。

Answer 5

我使用了Safaris CSS3多個背景圖像來解決這個問題，只做了4張高500像素的圖像並將它們放在彼此的頂部