iphone/ipad上的背景圖像css問題（不響應）

我有一個網站，雖然沒有響應，應該只顯示在iPhone或iPad上查看桌面網站的縮放版本。問題是我的主背景圖像因爲某種原因被壓縮。如果我調整了瀏覽器的大小，我無法重新創建這個問題，所以我只是努力弄清楚iOS上正在發生的事情。該網站是 - 任何幫助將不勝感激！iphone/ipad上的背景圖像css問題（不響應）

新增信息：這個問題似乎是與div.bg，主要和它的背景圖像設置，在style.css中

來源

2012-07-19 bsod99

樣式表AREE設置爲屏幕。嘗試將它們設置爲「全部」。此外，你的圖形太大了@SCott辛普森說。可能值得做點什麼。 – 2012-07-19 21:20:41

iOS對背景圖像有200萬像素限制。你的圖像是1587 * 1340 = 2,126,580像素 - 有點太多了。因此它縮小了。

您可以使用background-size屬性將大小修改爲您所期望的大小。你會失去一些細節，但它會是正確的大小。添加到您的CSS：

.bg-main { -webkit-background-size: 1587px 1340px }

來源

2012-07-19 21:23:32

...並且像上面提到的Scott一樣，是幾個PNG文件大小超過兆字節。我建議將這些文件保存爲JPG格式，並通過破碎機運行整個站點的圖像。 – 2012-07-19 21:24:48

非常感謝。直到現在我還沒有意識到iOS限制。你的CSS規則改進了一些東西，因爲文本全部坐在BG的淺黃色部分，並且清晰易讀。仍然不確定爲什麼bg圖像的外部部分不可見，但有什麼想法？是的，肯定需要在整個網站上整理圖片，一般來說太大了 – bsod99 2012-07-19 21:36:06

DOM樹中的第一個寬度是'.main {width：1075px; }'。這是在背景圖像的大小內，所以外面會被裁剪掉。如果您需要查看這些視圖，則可以使用元視口聲明來擴展初始視口以包含它們。例如。 ''（未經測試，我沒有iPad）。 – 2012-07-19 21:42:51

這種形象被巨大的，這也許就是問題的243行中。嘗試通過「保存爲網頁」來縮小尺寸（嘗試讓設計使用.jpg）。

來源

2012-07-19 21:15:24

感謝您的回覆。是的，我已經繼承了這個網站，並且圖像肯定需要優化。我不認爲這會成爲問題...但在提到它之後，谷歌搜索顯示移動Safari中存在一個錯誤，它會縮小比特定尺寸更大的背景圖像 – bsod99 2012-07-19 21:19:00

你可以用2個部分砍你的大圖像，並添加2個背景的div。

像這樣：

background: url(1.jpg) top center, url(2.jpg) bottom center

來源

2014-06-05 08:55:20 Ant0ha

iphone/ipad上的背景圖像css問題（不響應）

回答

相關問題