ipad顯示我的精靈圖像不正確

我想知道這是否有點簡單，但我有一個問題，只有在我的萌芽圖像的iPad上。我有一個標籤，我使用sprite來顯示星號（類似於Gmail或Picasa）的圖像以指示最愛。在電腦上的所有其他瀏覽器（包括Safari）上，都是完全正常的。ipad顯示我的精靈圖像不正確

問題出在iPad上，它顯示了更多的精靈比它應該和它看起來很奇怪。更奇怪的是，這張圖片重複了好幾次，似乎並不一致。

這是專門針對iPad的某種縮放問題或視口設置問題嗎？這讓我瘋狂，而我所做的任何修復它的東西都會切斷一些圖像，並破壞正常的瀏覽器外觀。

下面是我的意思，因爲我不能擺出我目前正在處理的頁面的一個例子。在這個網站上，我已經在過去的工作，在iPad上的觀看選項看起來很奇怪： http://demo.qlikview.com/index.aspx?section=Life 例如，「下載」查看選項看起來不同在FEMA應用比在踢它的應用程序，因此它不甚至似乎是一致的。

here's a screenshot

任何幫助，將不勝感激。謝謝！

來源

2011-04-03 Munzilla

除非這是某人已知的問題，否則我懷疑您需要提供某種代碼或測試用例。 – thirtydot 2011-04-03 01:49:35

我不認爲他需要顯示一些代碼。這是一個瀏覽器縮放問題。 – meo 2011-04-03 11:57:48

這是因爲iPad會縮放您的頁面。

使用精靈的元素的大小被縮放，精靈圖像將被縮放。但它似乎並不準確。

當您在safari中縮小時會發生同樣的情況。這是因爲圖像在瀏覽器中的縮放方式與dom元素不同。一個dom元素被渲染爲矢量對象。所以當你放大或縮小時，線條保持銳利。當你對位圖做同樣的事情時。它變得模糊，瀏覽器需要猜測圖像看起來像小還是大。

你有兩個選擇：

使用精靈之間更多的空間。
使用EMS，而不是像素

PS：不要使用重要的在CSS

來源

2011-04-03 11:57:13 meo

偉大的洞察力，謝謝。爲什麼會特別使用EMs？ – Munzilla 2011-04-03 12:06:35

，因爲safari接縫可以更好地處理EM的尺寸調整。你可以嘗試以百分比的方式指定CSS3背景大小。這可能有助於。 – meo 2011-04-03 12:08:47

'！important'語句在恰當使用時會將它放在css中。盲目指導別人不要使用它是不負責任的。 – 2013-04-12 10:39:25

這個最簡單的解決方法是把大綱在你儘管與邊框的顏色！與父容器的背景顏色相同。大綱在你的元素之外，不影響佈局。你看到的是移動Webkit在縮小圖像背景顏色或背景圖像時遇到的問題，它們會從容器中流失。綱要將放在上面並覆蓋它。

來源

2011-06-12 20:30:26 Robert

像meo指出的，最好的選擇是之間的精靈之間的離開空間。

還有一件事是你可以做的，那就是不要讓用戶通過在你的標籤中加入下面一行來放大網頁。它看起來與您在瀏覽器中查看完全一樣，如果因爲精靈問題而導致iPad中的元素大量混亂，那麼它會非常整齊。

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />

祝你好運！

來源

2011-07-06 15:53:35 blackpla9ue

+1之間的精靈之間的離開空間，這個問題已經在其他瀏覽器中突然出現*咳嗽* IE *咳嗽* – scunliffe 2012-06-20 18:06:49

我通常所做的只是爲iPad用戶定義單獨的圖像（非sprited）。我知道它沒有像你希望的那樣快速加載圖像，但我覺得這是他們必須付出的代價。我所做的是在服務器上使用@media在您的樣式表中爲單獨的圖像定義iPad瀏覽器的不同圖像。如何使用@media iPad的快速回顧，可以發現：

http://css-tricks.com/snippets/css/ipad-specific-css/

來源

2012-02-18 04:38:35 hypnoseal

我只是碰到了這個問題爲好。自從我第一次注意到iPad的不完美之後，我在我的精靈之間留下了更多的空間。但是，我目前的項目涉及使用CSS3轉換的另一個元素和。這種組合使得精靈模糊不清，邊緣奇怪的裁剪。我實際上在No more jagged edges in iOS找到了一個修復程序。嘗試採用以下CSS到你的精靈：

/* IOS fix for incorrectly scaled sprites */ 
-webkit-background-clip:padding-box; 
background-clip:padding-box;

那些幾行字在我的項目工作的法寶。當然，YMMV。

來源

2012-11-30 07:20:24 thirdender

此外，頁面[CSS3動畫：打嗝和錯誤，你會想避免]（http：///webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-animations-the-hcucups-and-bugs-youll-want-to-avoid/）有許多其他有用的iOS修復CSS3轉換。 – thirdender 2012-11-30 07:21:30

ipad顯示我的精靈圖像不正確

回答

相關問題