jQuery Mobileは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で導入された網膜ディスプレイかもしれません。網膜ディスプレイの世話をするために、私たちは2倍の解像度でアイコンを使用しなければなりません。あなたの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); 

} 
}