jQuery Mobile 将 'Retina' 图标设置为默认图标

Question

我正在开发一个基于 jquery 移动的网站，并为视网膜显示器设置 css。 Jquery Mobile 包括 36px x 36px 图标大小，但默认使用 18px 版本。我找不到要添加到按钮以使其使用 36px 大小的 jQuery Mobile 类或数据属性。

看起来 ui-icon-alt 类使用了正确的背景图像，但是当我从 ui-icon 更改类时按钮根本不呈现> 到 ui-icon-alt。这是我正在处理的相关按钮:

<a href="#" data-icon="arrow-l" data-role="button" class="show-back ui-btn-left ui-btn ui-btn-corner-all ui-btn-icon-notext" data-iconpos="notext">
    <span class="ui-btn-inner ">
        <span class="ui-btn-text">Back</span>
        <span class="ui-icon ui-icon-arrow-l"></span>
    </span>
</a>

Answer 1

您无需为图标添加任何内容即可使用 Retina 版本。

根据 jQuery Mobile docs为了使用 retina 图标，您应该使用 css 媒体查询(如果您查看 jquery.mobile-1.2.0.css 文件，您会注意到他们就是这样完成的。

To add a HD icon, create an icon that is 36x36 pixels (exactly double the 18 pixel size), and add second a rule that uses the -webkit-min-device-pixel-ratio: 2 media query to target a rule only to high resolution displays. Specify the background image for the HD icon file and set the background size to 18x18 pixels which will fit the 36 pixel icon into the same 18 pixel space. The media query block can wrap multiple icon rules

和示例 CSS

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-icon-myapp-email {
        background-image: url("app-icon-email-highres.png");
        background-size: 18px 18px;
    }
    ...more HD icon rules go here...
}