1

我正在使用 Andy Matthew 的自定义 jQuery Mobile 图标包（“原始”和“字体真棒”图标。字体真棒在 iPad 上工作，但“原始”图标不显示（但显示在三星设备等）。

我修改了 CSS 以使用 Rails 资产管道，如下所示：

/*
    jQuery Mobile Icon Pack
    andy matthews
    @commadelimited
*/

/* Icons
-----------------------------------------------------------------------------------------------------------*/

.ui-icon,
.ui-icon-searchfield:after {
    background: #666666;
    background:  rgba(0,0,0,.4);
    background-image: image-url('vendor/jqm-icon-pack/icons-18-white-pack.png');
    background-repeat: no-repeat;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
}


/* Alt icon color
-----------------------------------------------------------------------------------------------------------*/

.ui-icon-alt {
    background: #ffffff;
    background: rgba(255,255,255,.3);
    background-image: image-url('vendor/jqm-icon-pack/icons-18-black-pack.png');
    background-repeat: no-repeat;
}

/* restore default loading image */
.ui-icon-loading {
    background: image-url('vendor/jqm-icon-pack/ajax-loader.gif');
    background-size: 46px 46px;
}

/* HD/"retina" sprite
-----------------------------------------------------------------------------------------------------------*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
        only screen and (-o-min-device-pixel-ratio: 3/2),
        only screen and (min--moz-device-pixel-ratio: 1.3),
        only screen and (min-device-pixel-ratio: 1.3),
        only screen and (min-resolution: 1.3dppx) {

    .ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
    .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
    .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
    .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
    .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on, .ui-icon-email , .ui-icon-page,
    .ui-icon-question , .ui-icon-foursquare , .ui-icon-twitter , .ui-icon-facebook , .ui-icon-dollar , .ui-icon-euro,
    .ui-icon-pound , .ui-icon-apple , .ui-icon-chat , .ui-icon-trash , .ui-icon-bell , .ui-icon-mappin , .ui-icon-direction,
    .ui-icon-heart , .ui-icon-wrench , .ui-icon-play , .ui-icon-pause , .ui-icon-stop , .ui-icon-person , .ui-icon-music,
    .ui-icon-rss , .ui-icon-wifi , .ui-icon-phone , .ui-icon-power , .ui-icon-lock , .ui-icon-flag , .ui-icon-calendar,
    .ui-icon-lightning , .ui-icon-drink , .ui-icon-android , .ui-icon-edit {
        background-image: image-url('vendor/jqm-icon-pack/icons-36-white-pack.png');
        -moz-background-size: 774px 54px;
        -o-background-size: 774px 54px;
        -webkit-background-size: 774px 54px;
        background-size: 774px 54px;
    }
    .ui-icon-alt {
        background-image: image-url('vendor/jqm-icon-pack/icons-36-black-pack.png');
    }
}

除此之外，我没有做任何改变。图片目录如下所示：assets/images/vendor/jqm-icon-pack

4

1 回答 1

0

Jquery Mobile serves up Retina optimised icons, but at the time there was a bug in the logic for displaying Retina friendly icons

于 2014-01-04T17:32:42.433 回答