Question

我的问题是：如果我使用带有视网膜显示屏的iphone4，我看不到图标-18-white.png中的任何图标（iPad和iPhone3GS一切都很好）。

如果我在浏览器中测试png，使用以下设置一切都很好：

@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-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 {
background-image: url(images/icons-36-white.png);
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
}
.ui-icon-alt {
background-image: url(images/icons-36-black.png);
}
}

/* plus minus */
.ui-icon-plus {
background-position: -0 50%;
}
.ui-icon-minus {
background-position: -36px 50%;
}

/* delete/close */
.ui-icon-delete {
background-position: -72px 50%;
}

/* arrows */
.ui-icon-arrow-r {
background-position: -108px 50%;
}
.ui-icon-arrow-l {
background-position: -144px 50%;
}
.ui-icon-arrow-u {
background-position: -180px 50%;
}
.ui-icon-arrow-d {
background-position: -216px 50%;
}

需要帮助 - 提前致谢！

Answer 1

您需要使用[filename] @ 2x.png格式创建其他图标。 Andy Matthews' page非常清楚地解释了如何做到这一点。

Answer 2

仅供参考...文件名不需要是@ 2x.png，这就是iPhone应用程序的方式。我认为继续使用这种格式是个好主意。

Answer 3

如果您指的是本地下拉的jQuery Mobile文件（而不是使用jQuery Mobile CDN），请确保项目中包含所有图像文件。对于高分辨率显示，使用不同的精灵图像（icons-36-white.png而不是icons-18-white.png）。

Answer 4

我使用CDN版本遇到同样的问题。我经常在PC上测试，但不得不在MAC上用我的IPad调试其他东西。在那里，我看到它拉了icons-36-white.png而不是icons-18-white.png，这是我在PC上引用的那个（在我的应用程序的清单文件中）。

因此，在制作具有离线阅读功能的HTML5应用时，请始终保留对这两个文件的引用。

我看不到带有视网膜显示的jquery移动图标

4 个答案: