jQuery Mobile не показывает значок данных в iPhone iOS 5 - PullRequest
Новая
       15

jQuery Mobile не показывает значок данных в iPhone iOS 5

2 голосов
/ 13 января 2012

Я использую версию 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>

Это глобальный код icon 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;
}

Не только заголовок, но и весь сайт использует глобальную иконку.

Есть идеи по этому поводу, ребята?

Спасибо!

1 Ответ

1 голос
/ 13 января 2012

Причиной проблемы может быть дисплей сетчатки, представленный в 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);

}
}
...