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); 

} 
}