jQuery Mobile不顯示iPhone中的數據圖標iOS 5

Question

我正在使用jQuery Mobile 1.6.4版本，開發一個移動網站，並且我有一個數據圖標，只在iOS 5中顯示（迄今爲止來自反饋）。

對於標題：

<div data-role="header" data-position="inline" data-theme="a"> 
<a data-rel="back" data-icon="arrow-l" data-ajax="true" data-theme="a" data-inline="true" title="Back">Back</a> 
<h1>Where can I travel</h1> 
<a href="#" data-theme="a" data-icon="home" data-iconpos="notext" data-role="button" title="Home"></a> 

這是我們使用的是全球圖標CSS代碼：

.ui-icon, 
.ui-icon-searchfield:after { 
    background: #FFFFFF /*{global-icon-color}*/; 
    background: transparent /*{global-icon-disc}*/; 
    background-image: url(http://code.jquery.com/mobile/latest/images/icons-18-black.png) /*{global-icon-set}*/; 
    background-repeat: no-repeat; 
    -moz-border-radius: 9px; 
    -webkit-border-radius: 9px; 
    border-radius: 9px; 
} 

不僅頭，但它是整個網站，會使用全球圖標。

對此有何想法？

謝謝！

Answer 1

該問題的原因可能是iphone 4S中引入的視網膜顯示。要照顧視網膜顯示，我們必須使用雙精度分辨率的圖標。請在您的css中包含此代碼並查看是否有任何區別。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
     only screen and (min--moz-device-pixel-ratio: 1.5), 
     only screen and (min-resolution: 240dpi) { 
    .ui-icon, 
.ui-icon-searchfield:after { 
    background-image: url(images/icons-36-black.png); 

} 
}